<template>
  <!-- <button class="b11" @click="toggleLoginStatus">{{ isLoggedIn ? '退出' : '登录' }}</button> -->
  <!-- <span>|</span> -->
  <!-- <button  @click="changeLanguage('en')" class="b22">English</button>
    <span>|</span>

    <button  @click="changeLanguage('zh')" class="b22">繁体</button> -->
  <!-- <select v-model="selectedLanguage" @change="changeLanguage" class="language-select">
        <option value="en">En</option>
        <option value="zh">繁体</option>
    </select> -->
  <div class="btnboxs">
    <div class="zichan" @click="handlePopup1025" v-if="token">
      <WalletFilled class="wwtq" />
      <span> {{ $t('header.zichan') }}</span>
    </div>
    <div class="txhead" v-if="token">
      <img class="txheadimg" src="@/assets/tx1.png" alt="" />

      <div class="userimgbox">
        <div class="userl">
          <img class="userlimg" src="@/assets/logos.png" alt="" />
        </div>
        <div class="userr">
          <div class="userinfo">
            <div class="infoimgbox">
              <img src="../assets/tx1.png" alt="" />
            </div>
            <div class="infoid">
              <div class="username">{{ userInfo.username }}</div>
              <div class="uidbox">
                <span class="uid">UID:{{ userInfo.id }}</span>
                <div class="uidbtn">
                  <i class="iconfont icon-fuzhi" @click="useCopy(userInfo.id)"></i>
                </div>
                <div class="uidbtn">
                  <i class="iconfont icon-caidan-anquan1x" v-if="userInfo.verify_identity"></i>
                  <p v-else class="toAuth" @click="handleShow1026('sfrz1413')">
                    {{ $t('header.renzheng') }}
                  </p>
                </div>
              </div>
            </div>
          </div>
          <div class="user-item" @click="handleShow1026('cz1413')">
            <UserFilled class="wwtw" />
            <div class="usertxt"> {{ $t('header.userinfo') }}</div>
          </div>
          <div class="user-item" @click="handleShow1026('tl1413')">
            <Lock class="wwtw" />
            <div class="usertxt"> {{ $t('header.anquan') }}</div>
          </div>

          <div class="ggbox" @click="handleShow1026('zjjv1413')">
            <div class="ggtxt">
              <span class="ggb">{{ $t('header.yaoqing') }}</span>
              <span class="ggb">{{ $t('header.gongtong') }}</span>
              <span class="ggh">{{ userInfo.invitation_code }}
                <i class="iconfont icon-fuzhi" @click="useCopy(userInfo.invitation_code)"></i>
              </span>
            </div>
            <div class="ggimg">
              <img v-lazy="'../assets/ggimg.png'" alt="" />
            </div>
          </div>

          <div class="user-item" @click="handleShow1027('customer')">
            <!-- <Edit style="width: 20px; height: 100%; margin-right: 8px" /> -->
            <i class="iconfont icon-kefu-copy"></i>
            <div class="usertxt">{{ $t('header.online') }}</div>
          </div>
          <div class="user-item" @click="handleShow1027('out')">
            <!-- <Edit style="width: 20px; height: 100%; margin-right: 8px" /> -->
            <i class="iconfont icon-tuichu"></i>
            <div class="usertxt">{{ $t('header.tuichu') }}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="logoIcon" v-if="!token" @click="toLogin">
      <i class="iconfont icon-wode"></i>
      <text class="login_text">Login</text>
    </div>
    <div class="linehead"></div>
    <div class="download_content">
      <i class="iconfont icon-yunxiazai"></i>
      <div class="download_list">
        <div class="list_item">
          <img src="" alt="" />
          <p class="download_text">App Store</p>
        </div>
        <div class="list_item">
          <img src="" alt="" />
          <p class="download_text">Google Play</p>
        </div>
      </div>
    </div>
    <div class="nzsdnwa2">
      <div class="svgjpiowe234jm">
        <img class="imglang" src="@/assets/lang.png" />
      </div>
      <div class="language-selector">
        <div class="language-option" @click="setSelectedLanguage('en')">EN</div>
        <div class="language-option" @click="setSelectedLanguage('jp')">
          日本语
        </div>
        <div class="language-option" @click="setSelectedLanguage('kor')">
          韩语
        </div>
        <div class="language-option" @click="setSelectedLanguage('zh')">
          繁体中文
        </div>
      </div>
    </div>
  </div>
  <!-- 更多的弹框 -->
  <div v-if="showTopupMore" class="mask1025" @click.self="showTopupMore = false"
    style="z-index: 99999; background: initial; backdrop-filter: none">
    <div class="popup-container1025">
      <div class="popup-header1025">
        <p></p>
        <CloseBold class="close-icon1025" style="color: #fff" @click="showTopupMore = false" />
      </div>
      <div class="popup-body1025 see_more_body">
        <div class="popup_content" v-if="moreType == 'topUp'">
          <div class="item">
            <p class="key">{{ $t('assets.dingdanid') }}</p>
            <p class="value">{{ orderItem.recharge_number }}</p>
          </div>
          <div class="item">
            <p class="key"></p>
            <p class="value">{{ orderItem.coin_type }}</p>
          </div>
          <div class="item">
            <p class="key">{{ $t('assets.zhuangtai') }}</p>
            <p class="value add_color2" v-if="orderItem.audit_status == 'pending'">
              {{ $t('assets.shenhezhong') }}
            </p>
            <p class="value add_color1" v-if="orderItem.audit_status == 'approved'">
              {{ $t('assets.tongguo') }}
            </p>
            <p class="value add_color3" v-if="orderItem.audit_status == 'rejected'">
              {{ $t('assets.jujue') }}
            </p>
          </div>
          <div class="item">
            <p class="key"> {{ $t('assets.chongbishuliang') }}</p>
            <p class="value">{{ orderItem.recharge_amount }}</p>
          </div>
          <div class="item">
            <p class="key"> {{ $t('assets.chongzhijine') }}</p>
            <p class="value">{{ orderItem.recharge_money }}</p>
          </div>
          <div class="item">
            <p class="key"> {{ $t('assets.chongzhishijian') }}</p>
            <p class="value">{{ orderItem.recharge_time }}</p>
          </div>
          <div class="item add_column">
            <p class="key">{{ $t('assets.chongzhipingzheng') }}</p>
            <p class="value add_margin">{{ orderItem.recharge_remark }}</p>
          </div>
          <div class="item add_column">
            <p class="key">{{ $t('assets.beizhu') }}</p>
            <!-- <image :src="url + orderItem.recharge_screenshot" mode="" class="screenshot"></image> -->
            <img :src="url + orderItem.recharge_screenshot" mode="" alt="" class="screenshot" />
          </div>
          <div class="item add_column">
            <p class="key">{{ $t('assets.shenheshuoming') }} </p>
            <p class="value add_margin">{{ orderItem.illustrate }}</p>
          </div>
        </div>

        <div class="popup_content" v-if="moreType == 'withdraw'">
          <div class="item">
            <p class="key">{{ $t('assets.dingdanid') }}</p>
            <p class="value">{{ orderItem.withdrawal_number }}</p>
          </div>
          <div class="item">
            <p class="key">{{ $t('assets.tibileixing') }}</p>
            <p class="value">{{ orderItem.coin_type }}</p>
          </div>
          <div class="item">
            <p class="key">{{ $t('assets.zhuangtai') }}</p>
            <p class="value add_color2" v-if="orderItem.audit_status == 'pending'">
              {{ $t('assets.shenhezhong') }}
            </p>
            <p class="value add_color1" v-if="orderItem.audit_status == 'approved'">
              {{ $t('assets.tongguo') }}
            </p>
            <p class="value add_color3" v-if="orderItem.audit_status == 'rejected'">
              {{ $t('assets.jujue') }}
            </p>
          </div>
          <div class="item">
            <p class="key"> {{ $t('assets.shenqingjine') }}</p>
            <p class="value">{{ orderItem.apply_money }}</p>
          </div>
          <div class="item">
            <p class="key"> {{ $t('assets.shijijine') }}</p>
            <p class="value">{{ orderItem.actual_amount }}</p>
          </div>
          <div class="item">
            <p class="key"> {{ $t('assets.shouxufei') }}</p>
            <p class="value">{{ orderItem.fee }}</p>
          </div>
          <div class="item">
            <p class="key"> {{ $t('assets.tixianleixing') }}</p>
            <p class="value">{{ orderItem.withdrawal_type }}</p>
          </div>
          <div class="item">
            <p class="key"> {{ $t('assets.tibishuliang') }}</p>
            <p class="value">{{ orderItem.withdrawal_amount }}</p>
          </div>
          <div class="item">
            <p class="key"> {{ $t('assets.tibidizhi') }}</p>
            <p class="value">{{ orderItem.withdrawal_address }}</p>
          </div>
          <div class="item">
            <p class="key"> {{ $t('assets.shenqingshijian') }}</p>
            <p class="value">{{ orderItem.apply_time }}</p>
          </div>
          <div class="item">
            <p class="key"> {{ $t('assets.gengxinshijian') }}</p>
            <p class="value">{{ orderItem.update_time }}</p>
          </div>
          <div class="item add_column">
            <p class="key"> {{ $t('assets.shenheshuoming') }}</p>
            <p class="value add_margin">{{ orderItem.illustrate || "--" }}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- 我的资产 -->
  <div v-if="showPopup1025" class="mask1025">
    <div class="popup-container1025">
      <!-- 头部 -->
      <div class="popup-header1025">
        <h3 class="title1025">{{ $t('assets.zichan') }}</h3>
        <CloseBold class="close-icon1025" style="color: #fff" @click="showPopup1025 = false" />
      </div>

      <!-- 主体内容 -->
      <div class="popup-body1025">
        <!-- 左侧 tabs -->
        <div class="tabs-container1025">
          <div class="nuh2o31jhp0sc">
            <div class="uyhe217egdwq3414">
              <img src="../assets/tx1.png" width="27px" height="27px" alt="" />
              <span>{{ userInfo.username }}</span>
            </div>
            <div class="kjdhuwqig412">
              <span v-if="showPassword">US$ {{ userInfo.available_amount }}</span>
              <span v-else>US$ {{ maskedValue(userInfo.available_amount) }}</span>
              <!-- <span>眼睛</span> -->
              <i class="iconfont" @click="togglePassword"
                :class="showPassword ? 'icon-zhengyan' : 'icon-icon-eye-close'"></i>
            </div>
            <div class="fgewf3242efsz">
              <span style="font-size: 14px">{{ $t('assets.keyongzijin') }}</span>
              <span v-if="showPassword" class="price_text">{{
                userInfo.available_amount
              }}</span>
              <span v-else class="price_text">{{
                maskedValue(userInfo.available_amount)
              }}</span>
            </div>
            <div class="fgewf3242efsz">
              <span style="font-size: 14px">{{ $t('assets.yiyongzijin') }}</span>
              <span v-if="showPassword" class="price_text">
                {{ userInfo.withdrawable_amount }}</span>
              <span v-else class="price_text">{{
                maskedValue(userInfo.withdrawable_amount)
              }}</span>
            </div>
          </div>
          <div v-for="(tab, index) in tabs1025" :key="tab.value" class="tab-item1025"
            :class="{ active1025: activeTab1025 === tab.value }" @click="activeTab1025 = tab.value">
            <span style="height: 24px">
              <img :src="getImageUrl(index)" width="24px" height="24px" alt="" />
            </span>
            <span class="iuyhdw7913u314f"> {{ t(tab.label) }}</span>
          </div>
        </div>

        <!-- 右侧内容 -->
        <div class="content-container1025">
          <div v-if="activeTab1025 === 'cz111413'" class="cz1413">
            <!-- 资产内容 -->
            <p class="title">{{ $t('assets.chuzhi') }}</p>
            <div class="topupMethod">
              <p class="text_btn" v-for="(item, index) in titleList" :key="index" @click="selectIndex(index)"
                :class="typeIndex == index ? 'active_text_btn' : ''">
                {{ t(item) }}


              </p>
            </div>
            <div class="select_info" v-if="typeIndex == 0">
              <div class="select_content">
                <!-- 下拉列表选项 -->
                <div class="num_list" @click="handleShowSelect">
                  <div class="list_left">
                    <div class="Gold_coin_type">
                      <img :src="url + selectPayAddress.icon" alt="" />
                    </div>
                    <p class="coin_type_text">
                      {{ selectPayAddress.allowed_type }}
                    </p>
                  </div>

                  <i class="iconfont icon-youjiantou"></i>
                </div>
                <ul class="select_list" v-if="selectType">
                  <li v-for="(item, index) in payAddressList" :key="index" @click="selectAddressItem(item)">
                    <div class="left_icon color1">
                      <img :src="url + item.icon" alt="" />
                    </div>
                    <p class="icon_text">{{ item.allowed_type }}</p>
                  </li>
                </ul>
              </div>
              <div class="to_url">
                <div class="left_icon">
                  <img :src="url + selectPayAddress.icon" alt="" />
                  <!-- <i class="iconfont icon-ethereum"></i> -->
                </div>
                <div class="right_icon">
                  <p class="title_text">{{ $t('assets.qingqianwang') }}</p>
                  <div class="url_bottom">
                    <p class="url_text">
                      {{ selectPayAddress.allowed_address }}
                    </p>
                    <i class="iconfont icon-fuzhi" @click="useCopy(selectPayAddress.allowed_address)"></i>
                  </div>
                </div>
              </div>

              <div class="exchange_rate">
                <p class="exchange_rate_text">
                  {{ $t('assets.duihuan') }} {{ rateObj.symbol }}/USD = {{ rateObj.price_usd }}:1
                </p>
              </div>
              <div class="input_list">
                <div class="input_item">
                  <p class="key">{{ $t('assets.chongzhishuliang') }} ({{ rateObj.symbol }})</p>
                  <input type="number" class="input_text" v-model="topUpInfo.recharge_amount" />
                </div>
                <div class="input_item">
                  <p class="key">{{ $t('assets.yuzhichongzhi') }} (USD)</p>
                  <input type="number" class="input_text" v-model="result" :disabled="true" style="color: #f7d04c" />
                </div>
                <div class="input_item">
                  <p class="key">{{ $t('assets.zhifupingzheng') }}</p>
                  <div class="id_card">
                    <el-upload class="avatar-uploader" :action="action" :headers="headers" :show-file-list="false"
                      :on-success="
                        (response, file, fileList) =>
                          handleAvatarSuccess(response, file, fileList, 'pay')
                      ">
                      <img v-if="payUrl" :src="url + payUrl" class="avatar" />
                      <el-icon v-else class="avatar-uploader-icon">
                        <Plus />
                      </el-icon>
                    </el-upload>
                  </div>
                </div>
                <div class="input_item">
                  <p class="key">{{ $t('assets.beizhu') }}</p>
                  <div class="id_card">
                    <textarea name="" id="" cols="30" rows="10" class="text_area"
                      v-model="topUpInfo.recharge_remark"></textarea>
                  </div>
                </div>
              </div>

              <div class="pay_text tter">
                <p class="text_left">{{ $t('assets.qingzhifu') }}</p>

                <p class="text_right">{{ result }} USD</p>
              </div>
              <div class="submit">
                <el-button class="addbtn submit_pay" @click="handleSubmit">{{ $t('assets.tijiao') }}</el-button>
              </div>
            </div>
            <div class="select_list" v-if="typeIndex == 1">
              <div class="pay_type">
                <img src="@/assets/icon-USD.png" alt="" />
                <p class="pay_name">USD</p>
              </div>
              <div class="exchange_rate">
                <p class="exchange_rate_text">{{ $t('assets.zichan') }} ETH/USD = 2670.19:1</p>
              </div>
              <div class="input_list">
                <div class="input_item">
                  <p class="key">{{ $t('assets.chongzhishuliang') }} (USD)</p>
                  <input type="number" class="input_text" />
                </div>
                <div class="input_item">
                  <p class="key">{{ $t('assets.chuzhijine') }} (USD)</p>
                  <input type="number" class="input_text" />
                </div>
              </div>
              <div class="pay_text">
                <p class="text_left">{{ $t('assets.qingzhifu') }}</p>

                <p class="text_right">10852 USD</p>
              </div>
              <div class="submit">
                <el-button class="addbtn submit_pay">{{ $t('assets.tijiao') }}</el-button>
              </div>
            </div>
          </div>
          <div v-if="activeTab1025 === 'tl1111413'" class="cz1413">
            <!-- 记录内容 -->
            <p class="title">{{ $t('assets.tiling') }}</p>
            <div class="select_info">
              <div class="select_content">
                <div class="num_list" @click="handleShowSelect">
                  <div class="list_left">
                    <div class="Gold_coin_type">
                      <img :src="url + selectPayAddress.icon" alt="" />
                    </div>
                    <p class="coin_type_text">
                      {{ selectPayAddress.allowed_type }}
                    </p>
                  </div>
                  <i class="iconfont icon-youjiantou"></i>
                </div>
                <ul class="select_list" v-if="selectType">
                  <li v-for="(item, index) in payAddressList" :key="index" @click="selectAddressItem(item)">
                    <div class="left_icon color1">
                      <img :src="url + item.icon" alt="" />
                    </div>
                    <p class="icon_text">{{ item.allowed_type }}</p>
                  </li>
                </ul>
              </div>
              <div class="exchange_rate">
                <p class="exchange_rate_text">
                  {{ $t('assets.duihuan') }} {{ rateObj.symbol }}/USD = {{ rateObj.price_usd }}:1
                </p>
              </div>
              <div class="input_list">
                <div class="input_item">
                  <p class="key">{{ $t('assets.tilingdizhi') }} ({{ rateObj.symbol }})</p>
                  <input type="text" class="input_text" v-model="extractInfo.withdrawal_address" />
                </div>
                <div class="input_item">
                  <p class="key">{{ $t('assets.tilingjine') }} (USD)</p>
                  <div class="usd_price">
                    <input type="number" v-model="extractInfo.withdrawal_amount" />
                    <p class="all">{{ $t('assets.quanbu') }}</p>
                  </div>
                </div>
              </div>
              <div class="text_list">
                <div class="text_item">
                  <p class="key">{{ $t('assets.keyong') }}</p>
                  <p class="value">72554.28 USD</p>
                </div>
                <div class="text_item">
                  <p class="key">{{ $t('assets.shouxufei') }}</p>
                  <p class="value">{{ buy_fee }} USD</p>
                </div>
                <div class="text_item add_color">
                  <p class="key">{{ $t('assets.yujidaozhang') }}</p>
                  <p class="value">{{ estResult }} {{ rateObj.symbol }}</p>
                </div>
              </div>
              <div class="submit">
                <button class="submit_pay" @click="subMitWithdrawal">
                  {{ $t('assets.queren') }}
                </button>
              </div>
            </div>
          </div>
          <div v-if="activeTab1025 === 'zjjv1413'" class="zjjv1413 cz1413">
            <p class="title">{{ $t('assets.zijinjilv') }}</p>
            <!-- 记录内容 -->
            <div class="list_title" v-if="secondPage == 'one'">
              <div class="title_item" v-for="(item, index) in fundRecords" :key="index" @click="selectFundIndex(index)">
                <p class="name">{{ t(item) }}</p>
                <p class="underline" :class="fundTitle == index ? 'active' : ''"></p>
              </div>
            </div>

            <div class="top_up_list" ref="listContent" @scroll="handleScroll('top_up')" v-if="secondPage == 'one'">
              <div class="list" v-for="(item, index) in top_up_list" :key="index" v-if="fundTitle == 0">
                <div class="list_top">
                  <p class="name">{{ item.coin_type }}</p>
                  <div class="name_right" v-if="item.recharge_number">
                    <p class="id_num">{{ item.recharge_number }}</p>
                    <i class="iconfont icon-fuzhi" @click="useCopy(item.recharge_number)"></i>
                  </div>
                </div>
                <div class="list_content">
                  <div class="item">
                    <p class="key">{{ $t('assets.chongbishuliang') }}</p>
                    <p class="value">{{ item.recharge_amount }}</p>
                  </div>
                  <div class="item add_text_center">
                    <p class="key">{{ $t('assets.chongzhijine') }}</p>
                    <p class="value">{{ item.recharge_money }}</p>
                  </div>
                  <div class="item add_right">
                    <p class="key">{{ $t('assets.zhuangtai') }}</p>
                    <p class="value add_color2" v-if="item.audit_status == 'pending'">
                      {{ $t('assets.shenhezhong') }}
                    </p>
                    <p class="value add_color1" v-if="item.audit_status == 'approved'">
                      {{ $t('assets.tongguo') }}
                    </p>
                    <p class="value add_color3" v-if="item.audit_status == 'rejected'">
                      {{ $t('assets.jujue') }}
                    </p>
                  </div>
                  <div class="item">
                    <p class="key">{{ $t('assets.chongzhileixing') }}</p>
                    <p class="value">{{ item.recharge_type }}</p>
                  </div>
                  <div class="item add_right">
                    <p class="key">{{ $t('assets.chongzhishijian') }}</p>
                    <p class="value time_text">{{ item.recharge_time }}</p>
                  </div>
                </div>
                <div class="btn_content">
                  <div class="btn_item" @click="handleEdit(item)">
                    <p class="more_text">{{ $t('assets.bianji') }}</p>
                    <i class="iconfont icon-bianji"></i>
                  </div>
                  <div class="btn_item" @click="handleShowMore('topUp', item)">
                    <p class="more_text">{{ $t('assets.gengduo') }}</p>
                    <i class="iconfont icon-youjiantou"></i>
                  </div>
                </div>
              </div>

              <div class="list" v-for="(item, index) in withdrawList" :key="index" v-if="fundTitle == 1">
                <div class="list_top">
                  <p class="name">{{ item.coin_type }}</p>
                  <div class="name_right" v-if="item.withdrawal_number">
                    <p class="id_num">{{ item.withdrawal_number }}</p>
                    <i class="iconfont icon-fuzhi" @click="useCopy(item.withdrawal_number)"></i>
                  </div>
                </div>
                <div class="list_content">
                  <div class="item">
                    <p class="key">{{ $t('assets.tikuanjine') }}</p>
                    <p class="value">{{ item.withdrawal_amount }}</p>
                  </div>
                  <div class="item add_text_center">
                    <p class="key">{{ $t('assets.shouxufei') }}</p>
                    <p class="value">{{ item.fee }}</p>
                  </div>
                  <div class="item add_right">
                    <p class="key">{{ $t('assets.zhuangtai') }}</p>
                    <p class="value add_color2" v-if="item.audit_status == 'pending'">
                      {{ $t('assets.shenhezhong') }}
                    </p>
                    <p class="value add_color1" v-if="item.audit_status == 'approved'">
                      {{ $t('assets.tongguo') }}
                    </p>
                    <p class="value add_color3" v-if="item.audit_status == 'rejected'">
                      {{ $t('assets.jujue') }}
                    </p>
                  </div>
                  <div class="item">
                    <p class="key">{{ $t('assets.tikuanleixing') }}</p>
                    <p class="value">{{ item.withdrawal_type }}</p>
                  </div>
                  <div class="item add_right">
                    <p class="key">{{ $t('assets.shenqingshijian') }}</p>
                    <p class="value time_text">{{ item.apply_time }}</p>
                  </div>
                </div>
                <div class="btn_content">
                  <div class="btn_item" @click="handleShowMore('withdraw', item)">
                    <p class="more_text">{{ $t('assets.gengduo') }}</p>
                    <i class="iconfont icon-youjiantou"></i>
                  </div>
                </div>
              </div>

              <loadbottom :page="page" :listLenght="listLength" :loadingType="loadingType" />
            </div>
            <!-- 点击编辑时的第二页面 -->
            <div class="select_info" v-if="secondPage == 'two'">
              <div class="editPage">
                <i class="iconfont icon-zuojiantou-1" @click="secondPage = 'one'"></i>
                <p>{{ $t('assets.bianjishuju') }}</p>
              </div>
              <div class="select_content">
                <div class="num_list">
                  <div class="list_left">
                    <p class="coin_type_text">
                      {{ topUpInfo.coin_type }}
                    </p>
                  </div>

                  <i class="iconfont icon-youjiantou"></i>
                </div>

                <div class="input_list">
                  <div class="input_item">
                    <p class="key">{{ $t('assets.chongzhishuliang') }} ({{ topUpInfo.coin_type }})</p>
                    <input type="number" placeholder="请输入充值数量" class="input_text" :disabled="true"
                      v-model="topUpInfo.recharge_amount" />
                  </div>
                  <div class="input_item">
                    <p class="key">{{ $t('assets.yuzhichongzhi') }} (USD)</p>
                    <input type="number" class="input_text" v-model="result" :disabled="true" style="color: #f7d04c" />
                  </div>
                  <div class="input_item">
                    <p class="key">{{ $t('assets.zhifupingzheng') }}</p>
                    <div class="id_card">
                      <el-upload class="avatar-uploader" :action="action" :headers="headers" :show-file-list="false"
                        :on-success="
                          (response, file, fileList) =>
                            handleAvatarSuccess(response, file, fileList, 'pay')
                        ">
                        <img v-if="payUrl" :src="url + payUrl" class="avatar" />
                        <el-icon v-else class="avatar-uploader-icon">
                          <Plus />
                        </el-icon>
                      </el-upload>
                    </div>
                  </div>
                  <div class="input_item">
                    <p class="key">{{ $t('assets.beizhu') }}</p>
                    <div class="id_card">
                      <textarea name="" id="" cols="30" rows="10" class="text_area"
                        v-model="topUpInfo.recharge_remark"></textarea>
                    </div>
                  </div>
                </div>
                <div class="submit">
                  <el-button class="addbtn submit_pay" @click="handleSubmit">{{ $t('assets.tijiao') }}</el-button>
                </div>
              </div>
            </div>
          </div>
          <div v-if="activeTab1025 === 'jfsc1413'" class="cz1413">
            <!--  -->
            <p class="title">{{ $t('assets.jifenshangcheng') }}</p>
            <div class="integral_content">
              <div class="order_list">
                <p class="order_top">{{ $t('assets.zongjifen') }}</p>
                <div class="order_amount">
                  <p>{{ poinsInfo.total_spent_points }}</p>
                  <!-- <image src="/static/openeyes.png" mode=""></image> -->
                </div>
                <div class="order_bottom">
                  <div class="order_item">
                    <p class="item_title">{{ $t('assets.keyongjifen') }}</p>
                    <p class="item_amount">{{ poinsInfo.available_points }}</p>
                  </div>
                </div>
              </div>
              <!--  -->
              <div class="list_content">
                <div class="title_list ffdg">
                  <div class="list_item" v-for="(item, index) in poinsTitle" :key="index" @click="handleIndex(index)">
                    <p class="name">{{ t(item) }}</p>
                    <p class="underline" :class="poinsIndex == index ? 'active' : ''"></p>
                  </div>
                </div>
                <div class="heightAuto" ref="mallContent" @scroll="handleScroll('mall')">
                  <div class="integral_list" v-if="poinsIndex == 0">
                    <div class="list_item" v-for="(item, index) in pointsList" :key="index">
                      <div class="list">
                        <div class="item">
                          <p class="key">{{ $t('assets.yonghuming') }}</p>
                          <p class="value">{{ item.username }}</p>
                        </div>
                        <div class="item text_center">
                          <p class="key">{{ $t('assets.huafeijifen') }}</p>
                          <p class="value">{{ item.spent_points }}</p>
                        </div>
                        <div class="item text_right">
                          <p class="key">{{ $t('assets.zhuangtai') }}</p>
                          <p class="value add_color2" v-if="item.review_status == 'pending'">
                            {{ $t('assets.shenhezhong') }}
                          </p>
                          <p class="value add_color1" v-if="item.review_status == 'approved'">
                            {{ $t('assets.tongguo') }}
                          </p>
                          <p class="value add_color3" v-if="item.review_status == 'rejected'">
                            {{ $t('assets.jujue') }}
                          </p>
                        </div>

                        <div class="item add_marigin">
                          <p class="key">{{ $t('assets.duhuanshijian') }}</p>
                          <p class="value">{{ item.exchange_time }}</p>
                        </div>
                        <div class="item text_right add_marigin">
                          <p class="key">{{ $t('assets.shenqingshijian') }}</p>
                          <p class="value">{{ item.apply_time }}</p>
                        </div>
                      </div>
                      <div class="illustrate">
                        <p class="illustrate_text">{{ $t('assets.shenheshuoming') }}</p>
                        <p class="illustrate_info">{{ item.illustrate }}</p>
                      </div>
                    </div>
                    <loadbottom :page="page" :listLenght="listLength" :loadingType="loadingType" />
                  </div>

                  <div class="mall_list" v-if="poinsIndex == 1">
                    <div class="mall_item" v-for="(item, index) in mallList" :key="index">
                      <div class="img_top">
                        <img :src="url + item.product_image" alt="" />
                        <!-- <image :src="url + item.product_image" alt="" /> -->
                      </div>
                      <div class="item_bottom">
                        <p class="item_title">{{ item.product_name }}</p>
                        <div class="text_bottom">
                          <!-- <text class="price"></text> -->
                          <div class="price_right">
                            <!-- <image src="/static/jf.png" alt="" class="img_integral" /> -->
                            <p class="integral_text">{{ item.points }}</p>
                          </div>
                          <button class="exchange" @click="exchangeId(item.id)">
                            {{ $t('assets.duanhuan') }}
                          </button>
                        </div>
                      </div>
                    </div>
                    <loadbottom :page="page" :listLenght="listLength" :loadingType="loadingType" />
                  </div>

                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- 设定中心 -->
  <div v-if="showPopup1026" class="mask1025">
    <div class="popup-container1025">
      <!-- 头部 -->
      <div class="popup-header1025">
        <h3 class="title1025">{{ $t('assets.shedingzhongxin') }}</h3>
        <CloseBold class="close-icon1025" style="color: #fff" @click="showPopup1026 = false" />
      </div>
      <!-- 主体 -->
      <div class="popup-body1025">
        <div class="tabs-container1025 flex_column">
          <div>
            <div v-for="(tab, index) in tabs1026" :key="tab.value" class="tab-item1025"
              :class="{ active1025: activeTab1025 === tab.value }" @click="activeTab1025 = tab.value">
              <span style="height: 24px">
                <img :src="getImageUrl2(index)" width="24px" height="24px" alt="" />
              </span>
              <span class="iuyhdw7913u314f"> {{ t(tab.label) }}</span>
            </div>
          </div>
          <div class="tab-item1025 logo_out" @click="handleShow1027('out')">
            <span style="height: 24px">
              <img src="../assets/setup11.png" width="24px" height="24px" alt="" />
            </span>
            <span class="iuyhdw7913u314f">{{ $t('assets.tuichudengru') }}退出登入</span>
          </div>
        </div>
        <!-- 右侧内容 -->
        <div class="content-container1025" @scroll="handleScroll('usb')" ref="containerRef">
          <div v-if="activeTab1025 === 'cz1413'" class="cz1413">
            <p class="title_text">{{ $t('assets.gerenzixun') }}</p>
            <div class="list_content">
              <div class="item_list">
                <p class="key">{{ $t('assets.zhanghu') }}</p>
                <div class="value">
                  <p>{{ userInfo.username }}</p>
                </div>
              </div>
              <div class="item_list">
                <p class="key">UID</p>
                <div class="value">
                  <p>{{ userInfo.id }}</p>
                  <i class="iconfont icon-fuzhi" @click="useCopy(userInfo.id)"></i>
                </div>
              </div>
              <div class="item_list">
                <p class="key">{{ $t('assets.shenfenrenzheng') }}</p>
                <div class="value">
                  <p v-if="userInfo.verify_identity" class="verify">{{ $t('assets.yirenzheng') }}</p>
                  <p else class="verify" @click="activeTab1025 = 'sfrz1413'">
                    {{ $t('assets.qvrenzheng') }}
                  </p>
                </div>
              </div>
              <div class="item_list">
                <p class="key">{{ $t('assets.yaoqingma') }}</p>
                <div class="value">
                  <p>{{ userInfo.invitation_code }}</p>
                  <i class="iconfont icon-fuzhi" @click="useCopy(userInfo.id)"></i>
                </div>
              </div>
              <div class="item_list">
                <p class="key">{{ $t('assets.youxiang') }}</p>
                <div class="value">
                  <p>{{ userInfo.email }}</p>
                </div>
              </div>
              <div class="item_list">
                <p class="key">{{ $t('assets.shoujihao') }}</p>
                <div class="value">
                  <p>{{ userInfo.phone }}</p>
                </div>
              </div>
            </div>
          </div>
          <div v-if="activeTab1025 === 'tl1413'" class="cz1413">
            <div class="setup_list" v-if="!second">
              <p class="title">{{ $t('assets.anquanshezhi') }}</p>
              <div class="list_item" @click="changePasd('one')">
                <p class="key">{{ $t('assets.shezhijiaoyi') }}</p>
                <i class="iconfont icon-youjiantou"></i>
              </div>
              <div class="list_item" @click="changePasd('two')">
                <p class="key">{{ $t('assets.xiugaimima') }}</p>
                <i class="iconfont icon-youjiantou"></i>
              </div>
            </div>
            <div class="set_password" v-if="secondPage == 'one' && second">
              <div class="title_content">
                <i class="iconfont icon-zuojiantou-1" @click="second = false"></i>
                <p class="title">{{ $t('assets.shezhijiaoyi') }}設置交易密碼</p>
              </div>
              <div class="list_item">
                <div class="item">
                  <p class="key">{{ $t('assets.yonghuming') }}</p>
                  <div class="value">
                    <input type="text" v-model="userInfo.username" :disabled="true" />
                  </div>
                </div>
                <div class="item">
                  <div class="pasd">
                    <p class="key">{{ $t('assets.jiaoyiyuanmima') }}</p>
                    <p class="key_tip">{{ $t('assets.chushimimawei') }}</p>
                  </div>
                  <div class="value">
                    <input :type="pasdShow ? 'text' : 'password'" v-model="tradeInfo.trading_pin" />
                    <i class="iconfont" :class="
                      pasdShow ? 'icon-zhengyan' : 'icon-icon-eye-close'
                    " @click="handleEye('pasd')"></i>
                  </div>
                </div>

                <div class="item">
                  <p class="key">{{ $t('assets.jiaoyixinmima') }}</p>
                  <div class="value">
                    <input :type="newShow ? 'text' : 'password'" v-model="tradeInfo.new_trading_pin" />
                    <i class="iconfont" :class="newShow ? 'icon-zhengyan' : 'icon-icon-eye-close'"
                      @click="handleEye('newPasd')"></i>
                  </div>
                </div>

                <div class="item">
                  <p class="key">{{ $t('assets.querenxinmima') }}</p>
                  <div class="value">
                    <input :type="repnewShow ? 'text' : 'password'" v-model="tradeInfo.rep_new_trading_pin" />
                    <i class="iconfont" :class="
                      repnewShow ? 'icon-zhengyan' : 'icon-icon-eye-close'
                    " @click="handleEye('repNewPasd')"></i>
                  </div>
                </div>
              </div>
              <el-button class="addbtn submit_btn" @click="toConfirm" :loading="tradeLoading">{{ $t('assets.tijiao')
              }}</el-button>
            </div>
            <div class="set_logo_pasd" v-if="secondPage == 'two' && second">
              <div class="title_content">
                <i class="iconfont icon-zuojiantou-1" @click="second = false"></i>
                <p class="title">{{ $t('assets.xiugaimima') }}</p>
              </div>
              <div class="list_item">
                <div class="item">
                  <p class="key">{{ $t('assets.yonghuming') }}</p>
                  <div class="value">
                    <input type="text" v-model="userInfo.username" :disabled="true" />
                  </div>
                </div>
                <div class="item">
                  <div class="pasd">
                    <p class="key">{{ $t('assets.dengruyuanmima') }}</p>
                    <!-- <p class="key_tip">初始交易密碼為登入密碼</p> -->
                  </div>
                  <div class="value">
                    <input :type="logPasd ? 'text' : 'password'" v-model="loginInfo.password" />
                    <i class="iconfont" :class="logPasd ? 'icon-zhengyan' : 'icon-icon-eye-close'"
                      @click="handleEye('logPasd')"></i>
                  </div>
                </div>

                <div class="item">
                  <p class="key">{{ $t('assets.dengruxinmima') }}</p>
                  <div class="value">
                    <input :type="logNewPasd ? 'text' : 'password'" v-model="loginInfo.new_password" />
                    <i class="iconfont" :class="
                      logNewPasd ? 'icon-zhengyan' : 'icon-icon-eye-close'
                    " @click="handleEye('logNewPasd')"></i>
                  </div>
                </div>

                <div class="item">
                  <p class="key">{{ $t('assets.querenxinmima') }}</p>
                  <div class="value">
                    <input :type="logRepNewPasd ? 'text' : 'password'" v-model="loginInfo.rep_new_password" />
                    <i class="iconfont" :class="
                      logRepNewPasd ? 'icon-zhengyan' : 'icon-icon-eye-close'
                    " @click="handleEye('logRepNewPasd')"></i>
                  </div>
                </div>
              </div>
              <el-button class="addbtn submit_btn" @click="handleLoginPasd" :loading="tradeLoading">
                {{ $t('assets.queren') }}
              </el-button>
            </div>
          </div>
          <div v-if="activeTab1025 === 'yq1413'" class="zjjv1413">
            <p class="invite_title">{{ $t('assets.yaoqinghaoyou') }}</p>
            <p class="invite_info">{{ $t('assets.gongtongtansuo') }}共同探索財富的秘密</p>
            <span class="invite_desc">{{ $t('assets.zhixuyici') }}</span>
            <div class="img_content">
              <div class="img_code">
                <qrcode-vue :value="userInfo.invitation_code" :options="qrOptions" class="qrcode-image" />
              </div>
              <div class="img_right">
                <img src="@/assets/ggimg.png" alt="" />
              </div>
            </div>
            <div class="list_content">
              <div class="list_item">
                <p class="key">{{ $t('assets.yaoqingma') }}</p>
                <div class="item_right">
                  <p class="text2">{{ userInfo.invitation_code }}</p>
                  <i class="iconfont icon-fuzhi" @click="useCopy(userInfo.invitation_code)"></i>
                </div>
              </div>
              <div class="list_item">
                <p class="key">{{ $t('assets.yaoqingwangzhi') }}</p>
                <div class="item_right">
                  <p class="text2">xxxx.com</p>
                  <i class="iconfont icon-fuzhi" @click="useCopy('xxxx.com')"></i>
                </div>
              </div>
            </div>
          </div>
          <div v-if="activeTab1025 === 'sfrz1413'" class="zjjv1413 cz1413">
            <p class="invite_title">{{ $t('assets.shenfenrenzheng') }}</p>
            <div class="set_password">
              <div class="list_item">
                <div class="item">
                  <p class="key">{{ $t('assets.yonghuming') }}用户名</p>
                  <div class="value">
                    <input type="text" v-model="Authentication.real_name" />
                  </div>
                </div>
                <div class="item">
                  <p class="key">{{ $t('assets.zhengjianhaoma') }}</p>
                  <div class="value">
                    <input type="text" v-model="Authentication.id_number" />
                  </div>
                </div>
                <div class="item">
                  <p class="key">{{ $t('assets.shangchuanzhengjianzheng') }}</p>
                  <div class="value id_card">
                    <el-upload class="avatar-uploader" :action="action" :headers="headers" :show-file-list="false"
                      :on-success="
                        (response, file, fileList) =>
                          handleAvatarSuccess(response, file, fileList, 'front')
                      ">
                      <img v-if="Authentication.id_front" :src="url + Authentication.id_front" class="avatar" />
                      <el-icon v-else class="avatar-uploader-icon">
                        <Plus />
                      </el-icon>
                    </el-upload>
                  </div>
                </div>
                <div class="item">
                  <p class="key">{{ $t('assets.shangchuanzhengjianbei') }}</p>
                  <div class="value id_card">
                    <el-upload class="avatar-uploader" :action="action" :headers="headers" :show-file-list="false"
                      :on-success="
                        (response, file, fileList) =>
                          handleAvatarSuccess(response, file, fileList, 'back')
                      ">
                      <img v-if="Authentication.id_back" :src="url + Authentication.id_back" class="avatar" />
                      <el-icon v-else class="avatar-uploader-icon">
                        <Plus />
                      </el-icon>
                    </el-upload>
                  </div>
                </div>
                <el-button class="addbtn add_margin" @click="handleReal" :loading="tradeLoading">
                  {{ $t('assets.queren') }}
                </el-button>
              </div>
            </div>
          </div>
          <div v-if="activeTab1025 === 'ydsz1413'" class="zjjv1413 cz1413">
            <el-button class="submit_btn" @click="handleSelectType('add', {})" v-if="addressList.length == 0">
              {{ $t('assets.addudundizhi') }}
            </el-button>
            <!-- 一级页面标题 -->
            <p class="invite_title" v-if="!editList && usbSecondPage == 'one'">
              {{ $t('assets.udunshezhi') }}
            </p>
            <!-- 二级页面标题 -->
            <div class="title_content" v-else>
              <i class="iconfont icon-zuojiantou-1" @click="handleChangeType"></i>
              <p class="title">
                {{ subType == "add" ? "添加" : "编辑" }}{{ $t('assets.udunxinxi') }}
              </p>
            </div>
            <div class="set_password address_content">
              <div class="list_item" v-if="editList">
                <div class="item">
                  <p class="key">{{ $t('assets.udundizhi') }}</p>
                  <div class="value">
                    <input type="text" v-model="usbInfo.address" />
                  </div>

                </div>
                <div class="item">
                  <p class="key">{{ $t('assets.udunleixing') }}</p>
                  <div class="value">
                    <input type="text" v-model="usbInfo.type" />
                  </div>
                </div>
                <el-button class="add_margin addbtn" @click="handleUsd" :loading="tradeLoading">
                  {{ subType == "add" ? "添加" : "编辑" }}
                </el-button>
              </div>

              <div class="usb_address" v-if="
                addressList.length !== 0 &&
                !editList &&
                usbSecondPage == 'one'
              ">
                <div class="list_item" v-for="(item, index) in addressList" :key="index">
                  <div class="item_top">
                    <div class="item">
                      <p class="key">{{ $t('assets.udundizhi') }}</p>
                      <p class="value">{{ item.address }}</p>
                    </div>
                    <div class="item">
                      <p class="key">{{ $t('assets.udunleixing') }}</p>
                      <p class="value">{{ item.type }}</p>
                    </div>
                  </div>
                  <div class="list_bottom">
                    <div class="item" @click="handleSelectType('edit', item)">
                      <i class="iconfont icon-bianji"></i>
                      <span class="edit">{{ $t('assets.bianji') }}</span>
                    </div>
                    <div class="item" @click="handleDelUsb(item)">
                      <i class="iconfont icon-shanchu"></i>
                      <span class="edit">{{ $t('assets.shanchu') }}</span>
                    </div>
                  </div>
                </div>
                <loadbottom :page="page" :listLenght="listLength" :loadingType="loadingType" />
                <el-button class="add_margin addbtn" @click="handleSelectType('add', {})" :loading="tradeLoading">
                  {{ subType == "add" ? "添加" : "编辑" }}
                </el-button>
              </div>
            </div>
            <!--  -->
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- <div
    v-if="showPopup1027"
    class="mask1025"
    @click.self="showPopup1027 = false"
  >
    <div class="popup-container1025 confirm_box">
      <p class="title">提示</p>
      <p class="content_text">確定平倉嗎？</p>
      <div class="bottom_btn">
        <p @click="showPopup1027 = false">取消</p>
        <p class="confirm_text1" @click="delUsbItem">確認</p>
      </div>
    </div>
  </div> -->
  <!-- 确定框 -->
  <customer :show="showPopup1027" ref="refCustomer" @onConfirm="outLogin">
    <template #header>
      <p class="title" v-if="clickType == 'customer'">{{ $t('assets.zaixiankefu') }}</p>
      <p class="title" v-if="clickType == 'out' || clickType == 'del'">{{ $t('assets.tishi') }}</p>
    </template>
    <template #content>
      <p class="content_text" v-if="clickType == 'customer'">xxxx@gmail.com</p>
      <p class="content_text" v-if="clickType == 'out'">{{ $t('assets.quedingtuichu') }}</p>
      <p class="content_text" v-if="clickType == 'del'">{{ $t('assets.quedingshanchu') }}</p>
    </template>
  </customer>
</template>

<script setup>
import { ref, onMounted, watch, computed } from "vue";
import { useI18n } from "vue-i18n";
import QrcodeVue from "qrcode.vue";
import { useRouter } from "vue-router";
import { throttle } from "lodash";
import loadbottom from "./loadbottom.vue";
import customer from "./customer.vue";
// import { useUserStore } from "../store/lang.js"
import {
  Edit,
  CopyDocument,
  UserFilled,
  Lock,
  WalletFilled,
  CloseBold,
} from "@element-plus/icons-vue";
import { getUserInfo1 } from "../api/login.js";
import {
  setTradingPin,
  setPassword,
  getRealname,
  editRealname,
  putRealname,
  getUshieldAddress,
  addUshieldAddress,
  editUshield,
  delectUshield,
  getExchangePoints,
  getPointsList,
  userPoints,
  getExchangeId
} from "../api/user.js";
import { logout } from "../api/login.js";
import {
  getPaymentAddress,
  exchangeRate,
  putRechargeOrder,
  editRechargeOrder,
  getExchangeRate,
  getWithdrawalOrder,
  getStock1,
  editWithdrawalOrder,
} from "../api/fund.js";
import { url, useCopy, convertToUSFormat, convertEnglishDateToChinese } from "../utils/util.js";
import bus from "../utils/event-bus.js"
const router = useRouter();
const { t } = useI18n()
const { locale } = useI18n(); // 使用 useI18n 来访问 locale
// const userStore = useUserStore()

const showPopup1025 = ref(false);
const activeTab1025 = ref("cz1413");
const selectType = ref(false);
const typeIndex = ref(0);
const titleList = ref([
  'assets.jsshuzi', 'assets.jssanfang'
]);
const showPopup1026 = ref(false);
const showPopup1027 = ref(false);
const refCustomer = ref(null);
const secondPage = ref("one");
const second = ref(false);
const token = ref("");
const action = ref(`${url}/v1/index/upload-img`);
const headers = ref({
  Authorization: `Bearer ${localStorage.getItem("token")}`,
});

const tabs1025 = ref([
  { label: 'assets.jschuzhi', value: "cz111413" },
  { label: 'assets.jstiing', value: "tl1111413" },
  { label: 'assets.jszijin', value: "zjjv1413" },
  { label: 'assets.jsjifens', value: "jfsc1413" },
]);

const tabs1026 = ref([
  { label: 'assets.jsgeren', value: "cz1413" },
  { label: 'assets.jsanquan', value: "tl1413" },
  { label: 'assets.jsfenxiang', value: "yq1413" },
  { label: 'assets.jsshenfen', value: "sfrz1413" },
  { label: 'assets.jsudun', value: "ydsz1413" },
]);
const userInfo = ref({});
const tradeInfo = ref({});
const loginInfo = ref({});
const Authentication = ref({});
const tradeLoading = ref(false);
// 我的资产
const showPassword = ref(true);
// 单个u盾信息
const usbInfo = ref({});
// U盾地址列表
const addressList = ref([]);
// 当前用户身份认证的id
const id = ref("");
const page = ref(1);
const listLength = ref(0);
const loadingType = ref("loading");
const editList = ref(false);
// U盾页显示等级
const usbSecondPage = ref("one");
// U盾类型 add添加 edit编辑
const subType = ref("add");
const isScrolling = ref(false);
const containerRef = ref(null);
// 设置交易密码的眼睛显示
const pasdShow = ref(false);
const newShow = ref(false);
const repnewShow = ref(false);
// 设置登入密码的眼睛显示
const logPasd = ref(false);
const logNewPasd = ref(false);
const logRepNewPasd = ref(false);
// 弹框点击类型
const clickType = ref("");

const qrOptions = ref({
  margin: 1,
  scale: 8,
  color: {
    dark: "#000000",
    light: "#ffffff",
  },
});

// 充值地址
const payAddressList = ref([]);
const selectPayAddress = ref({});
const rateObj = ref({});
const topUpInfo = ref({});
const top_up_list = ref([]);
const fundRecords = ref(["assets.jschuzhi", "assets.jstiing", "assets.jszhangwu"]);
const fundTitle = ref(0);
const listContent = ref(null);
const withdrawList = ref([]);
const showTopupMore = ref(false);
const moreType = ref("");
const orderItem = ref({});
const editType = ref(false);
const editItem = ref({});
const payUrl = ref("");
const extractInfo = ref({});
const configStock = ref({});

// 积分商城
const poinsInfo = ref({});
const poinsTitle = ref(["assets.jsjifenl", "assets.jsjifens"]);
const poinsIndex = ref(0);
const mallList = ref([]);
const pointsList = ref([]);
const mallContent = ref(null);

const lang = ref('')
// 获取积分详情数据
const getPointsInfo = async () => {
  const res = await userPoints();
  if (res.code == 200) {
    poinsInfo.value = res.data.data;
  }
};
const handleIndex = (index) => {
  poinsIndex.value = index;
  page.value = 1;
  if (index == 0) {
    getPoints();
  } else {
    getChangePoints();
  }
};
const getPoints = async () => {
  // const loadingType = ref('loading')
  loadingType.value = "loading";
  const res = await getExchangePoints(page.value);
  if (res.code == 200) {
    loadingType.value = "noMore";
    listLength.value = res.data.data.length;
    if (page.value == 1) {
      pointsList.value = res.data.data;
    } else {
      pointsList.value = pointsList.value.concat(res.data.data);
      console.log("合并数据-----", pointsList.value)
    }
  }
};
const getChangePoints = async () => {
  loadingType.value = "loading";
  const res = await getPointsList(page.value);
  if (res.code == 200) {
    loadingType.value = "noMore";
    listLength.value = res.data.data ? res.data.data.length : 0;
    if (page.value == 1) {
      mallList.value = res.data.data;
    } else {
      mallList.value = mallList.value.concat(res.data.data);
    }
  }
};
const exchangeId = async (id) => {
  var res = await getExchangeId(id)
  if (res.code == 200) {
    ElMessage.success({
      message: res.message,
      type: "success",
      plain: true,
    });
    getPointsInfo()
  }
}

// 监听 ref 值的变化
watch(activeTab1025, (newValue, oldValue) => {
  // 点击身份认证
  if (newValue === "sfrz1413") {
    console.log("点击了身份认证");
    if (!userInfo.value.verify_identity) {
      // 尚未认证通过  请求之前得数据进行回显
      getRealName();
    }
  } else if (newValue === "ydsz1413") {
    page.value = 1;
    // 获取U盾列表
    getUsbAddress();
    // 点击u盾设置时将所有的数据初始化
    usbSecondPage.value = "one";
    editList.value = false;
  } else if (newValue === "tl1413") {
    // 点击安全设置时将所有的数据初始化
    secondPage.value = "one";
    second.value = false;
  } else if (newValue === "cz111413") {
    page.value = 1;
    editType.value = false;
    payUrl.value = "";
    topUpInfo.value = {};
    if (!editType.value) {
      topUpInfo.value = {};
      getPayAddress();
    }
  } else if (newValue == "zjjv1413") {
    page.value = 1;
    secondPage.value = "one";
    fundTitle.value = 0
    // 获取储值订单
    getOrderList();
  } else if (newValue == "tl1111413") {
    extractInfo.value = {};
    page.value = 1;
    getStock();
    getPayAddress();
  } else if (newValue == "jfsc1413") {
    page.value = 1;
    getPointsInfo();
    getPoints();
  }
});

const getImageUrl = (index) => {
  return new URL(`../assets/tc${index + 1}.png`, import.meta.url).href;
};
const getImageUrl2 = (index) => {
  return new URL(`../assets/setup${index + 1}.png`, import.meta.url).href;
};
// 生成掩码值（星号）
const maskedValue = (value) => {
  const [integerPart, decimalPart] = value.split(".");
  const maskedInteger = "*".repeat(integerPart.length);
  return decimalPart ? `${maskedInteger}` : maskedInteger;
};
const togglePassword = () => {
  showPassword.value = !showPassword.value;
};
// 获取支付地址
const getPayAddress = async () => {
  const res = await getPaymentAddress();
  if (res.code == 200) {
    payAddressList.value = res.data.data;
    selectPayAddress.value = res.data.data[0];
    console.log("获取的地址-=----", res.data.data);
    getChangeRate(selectPayAddress.value.allowed_type);
  }
};
const selectAddressItem = (item) => {
  selectPayAddress.value = item;
  selectType.value = false;

  // 根据所选类型获取数据
  getChangeRate(item.allowed_type);
};
const getChangeRate = async (type) => {
  const res = await exchangeRate(type);
  if (res.code == 200) {
    rateObj.value = res.data;
    console.log("根据单个获取的数据-----", res.data);
  }
};
const handleSubmit = async () => {
  if (!editType.value) {
    // 创建充值订单
    var data = new FormData();
    data.append("payment_addresses_id", selectPayAddress.value.id);
    data.append("recharge_amount", topUpInfo.value.recharge_amount);
    data.append("estimated_recharge_money", result.value);
    data.append("recharge_screenshot", topUpInfo.value.recharge_screenshot);
    data.append("recharge_remark", topUpInfo.value.recharge_remark);
    const res = await editRechargeOrder(data);
    if (res.code == 200) {
      ElMessage.success({
        message: res.message,
        type: "success",
        plain: true,
      });
      activeTab1025.value = "zjjv1413";
    }
  } else {
    // 更新充值订单
    const data = new FormData();
    data.append("recharge_screenshot", topUpInfo.value.recharge_screenshot);
    data.append("recharge_remark", topUpInfo.value.recharge_remark);
    const res = await putRechargeOrder(topUpInfo.value.id, data);
    if (res.code == 200) {
      // 返回第一页且数据进行初始值显示
      secondPage.value = "one";
      editType.value = false;
      ElMessage.success({
        message: res.message,
        type: "success",
        plain: true,
      });
    }
  }
};
// 获取充值记录
const getOrderList = async () => {
  loadingType.value = "loading";
  const res = await getExchangeRate(page.value);
  if (res.code == 200) {
    loadingType.value = "noMore";
    listLength.value = res.data.data ? res.data.data.length : 0;
    console.log("获取数据了====", res.data.data)
    if (lang.value == 'en') {
      res.data.data.forEach((item) => {
        item.recharge_time = convertToUSFormat(item.recharge_time)
      })
    }
    if (page.value == 1) {
      top_up_list.value = res.data.data.map((item) => {
        item.recharge_number = item.recharge_number.includes("-")
          ? item.recharge_number.split("-")[1]
          : "";
        return item;
      });
    } else {
      top_up_list.value = top_up_list.value.concat(res.data.data);
    }
  }
};
const changePasd = (type) => {
  secondPage.value = type;
  second.value = true;
};
const selectFundIndex = (index) => {
  fundTitle.value = index;
  page.value = 1;
  if (index == 0) {
    getOrderList();
  } else if (index == 1) {
    getWithdrawList();
  }
};
const getWithdrawList = async () => {
  const res = await getWithdrawalOrder(page.value);
  if (res.code == 200) {
    loadingType.value = "noMore";
    listLength.value = res.data.data ? res.data.data.length : 0;
    if (lang.value == 'en') {
      res.data.data.forEach((item) => {
        item.apply_time = convertToUSFormat(item.apply_time)
      })
    }
    if (page.value == 1) {
      withdrawList.value = res.data.data.map((item) => {
        item.withdrawal_number = item.withdrawal_number.includes("-")
          ? item.withdrawal_number.split("-")[1]
          : "";
        return item;
      });
    } else {
      withdrawList.value = withdrawList.value.concat(res.data.data);
    }
    console.log("充值订单列表0----", withdrawList.value);
  }
};
const subMitWithdrawal = async () => {
  if (!extractInfo.value.withdrawal_address) {
    ElMessage.success({
      message: "请填写提幣地址!",
      type: "warning",
      plain: true,
    });
    return false;
  }
  if (!extractInfo.value.withdrawal_amount) {
    ElMessage.success({
      message: "请填写提领金额!",
      type: "warning",
      plain: true,
    });
    return false;
  }
  const data = {
    apply_money: estResult.value,
    payment_addresses_id: selectPayAddress.value.id,
    withdrawal_address: extractInfo.value.withdrawal_address,
    withdrawal_amount: extractInfo.value.withdrawal_amount + "",
  };
  const res = await editWithdrawalOrder(data);
  if (res.code == 200) {
    ElMessage.success({
      message: res.message,
      type: "success",
      plain: true,
    });
    fundTitle.value = 1;
    activeTab1025.value = "zjjv1413";
  }
};
const handleShowMore = (type, item) => {
  showTopupMore.value = true;
  moreType.value = type;
  orderItem.value = item;
};
const handleEdit = (item) => {
  editType.value = true;
  // activeTab1025.value = "cz111413";
  topUpInfo.value = item;
  payUrl.value = item.recharge_screenshot;
  secondPage.value = "two";
  console.log("编辑数据-----", item);
};
const handlePopup1025 = () => {
  showPopup1025.value = true;
  activeTab1025.value = "cz111413";
};
let phoneFlag = ref("EN（EU）");

// 在组件挂载时，从 localStorage 中获取之前存储的语言设置
onMounted(() => {
  token.value = localStorage.getItem("token");
  lang.value = localStorage.getItem("lang")

  if (token.value) {
    getUserInfo();
  }
  // const savedLanguage = localStorage.getItem("selectedLanguage");
  // if (savedLanguage) {
  //   locale.value = savedLanguage;
  //   phoneFlag.value = savedLanguage === "en" ? "EN（EU）" : "繁中";
  // }

  bus.on("data-updated", (data) => {
    // 处理接收到的数据
    lang.value = data;
    if (data == 'en') {
      top_up_list.value.forEach((item) => {
        item.recharge_time = convertToUSFormat(item.recharge_time)
      })
      withdrawList.value.forEach((item) => {
        item.apply_time = convertToUSFormat(item.apply_time)
      })
    } else {
      top_up_list.value.forEach((item) => {
        item.recharge_time = convertEnglishDateToChinese(item.recharge_time)
      })
      withdrawList.value.forEach((item) => {
        item.apply_time = convertEnglishDateToChinese(item.apply_time)
      })
    }
  })
});
// 获取股票配置
const getStock = async () => {
  const res = await getStock1('stock');
  if (res.code == 200) {
    configStock.value = res.data.value;
  }
};
const selectIndex = (index) => {
  typeIndex.value = index;
};
const handleShowSelect = () => {
  selectType.value = !selectType.value;
};
const setSelectedLanguage = (value) => {
  locale.value = value;
  // phoneFlag.value = value === "en" ? "EN（EU）" : "繁中";
  localStorage.setItem("lang", value);
  bus.emit('data-updated', value);
  // provide('handleGetLang',value)
};
const handleShow1026 = (type) => {
  activeTab1025.value = type;
  showPopup1026.value = true;
};
const toLogin = () => {
  router.replace("/login");
};
const getUserInfo = async () => {
  const res = await getUserInfo1();
  if (res.code == 200) {
    userInfo.value = res.data;
    console.log("用户信息-=----", res.data);
    localStorage.setItem("userInfo", JSON.stringify(res.data));
  }
};
const toConfirm = async () => {
  tradeLoading.value = true;
  if (tradeInfo.value.new_trading_pin !== tradeInfo.value.rep_new_trading_pin) {
    ElMessage.success({
      message: "新密码和确认密码不一致!",
      type: "warning",
      plain: true,
    });
    tradeLoading.value = false;
    return false;
  }
  const data = {
    ...tradeInfo.value,
    trading_pin: tradeInfo.value.trading_pin + "",
  };
  console.log("修改交易密码----", data);
  const res = await setTradingPin(data);
  if (res.code == 200) {
    // console.log("返回正确数据----",res)
    ElMessage.success({
      message: res.message,
      type: "success",
      plain: true,
    });
    tradeLoading.value = false;
  } else {
    tradeLoading.value = false;
  }
};
const handleLoginPasd = async () => {
  tradeLoading.value = true;
  if (loginInfo.value.new_password !== loginInfo.value.rep_new_password) {
    ElMessage.success({
      message: "新密码和确认密码不一致!",
      type: "warning",
      plain: true,
    });
    tradeLoading.value = false;
    return false;
  }
  const data = { ...loginInfo.value };
  const res = await setPassword(data);
  if (res.code == 200) {
    tradeLoading.value = false;
    ElMessage.success({
      message: res.message,
      type: "success",
      plain: true,
    });

    localStorage.removeItem("token");
    localStorage.removeItem("userInfo");
    setTimeout(() => {
      router.replace("/login");
    }, 1000);
  } else {
    tradeLoading.value = false;
  }
};
const handleAvatarSuccess = (res, file, fileList, type) => {
  if (res.code == 200) {
    if (type == "front") {
      Authentication.value.id_front = res.data.image_url;
    } else if (type == "back") {
      Authentication.value.id_back = res.data.image_url;
    } else if (type == "pay") {
      payUrl.value = res.data.image_url;
      topUpInfo.value.recharge_screenshot = file.raw;
    } else if (type == "payEdit") {
      payUrl.value = res.data.image_url;
      topUpInfo.value.recharge_screenshot = file.raw;
      console.log("fileList----", fileList);
    }
  }
};
const result = computed(() => {
  // 检查输入是否为有效数字
  if (
    !topUpInfo.value.recharge_amount ||
    isNaN(topUpInfo.value.recharge_amount)
  ) {
    return 0;
  }
  return (
    Number(topUpInfo.value.recharge_amount) * rateObj.value.price_usd
  ).toFixed(6);
});
const estResult = computed(() => {
  // 检查输入是否为有效数字
  if (
    !extractInfo.value.withdrawal_amount ||
    isNaN(extractInfo.value.withdrawal_amount)
  ) {
    return 0;
  }
  return (
    (Number(extractInfo.value.withdrawal_amount) - buy_fee.value) /
    rateObj.value.price_usd
  ).toFixed(6);
});
const buy_fee = computed(() => {
  // 检查输入是否为有效数字
  if (
    !extractInfo.value.withdrawal_amount ||
    isNaN(extractInfo.value.withdrawal_amount)
  ) {
    return 0;
  }
  return (
    Number(extractInfo.value.withdrawal_amount) *
    Number(configStock.value.stock_trade_fee)
  ).toFixed(6);
});
const getRealName = async () => {
  const res = await getRealname();
  if (res.code == 200) {
    Authentication.value = { ...res.data };
    // Authentication.value.real_name = res.data.real_name;
    // Authentication.value.id_number = res.data.id_number;
    // Authentication.value.id_front = res.data.id_front;
    // Authentication.value.id_back = res.data.id_back;
    id.value = res.data.id;
  }
};
const handleReal = async () => {
  tradeLoading.value = true;
  const data = {
    ...Authentication.value,
  };
  if (!Authentication.value.real_name) {
    ElMessage.success({
      message: "请输入姓名!",
      type: "warning",
      plain: true,
    });
    tradeLoading.value = false;
    return false;
  } else if (
    Authentication.value.real_name.length < 4 ||
    Authentication.value.real_name.length > 30
  ) {
    ElMessage.success({
      message: "请输入4-30位的名字!",
      type: "warning",
      plain: true,
    });
    tradeLoading.value = false;
    return false;
  }

  if (!Authentication.value.id_number) {
    ElMessage.success({
      message: "请输入身份证号码!",
      type: "warning",
      plain: true,
    });
    tradeLoading.value = false;
    return false;
  } else if (
    Authentication.value.id_number.length < 6 ||
    Authentication.value.id_number.length > 50
  ) {
    ElMessage.success({
      message: "请输入6-30位的身份证号码!",
      type: "warning",
      plain: true,
    });
    tradeLoading.value = false;
    return false;
  }
  // uni.showLoading({
  // 	mask: true
  // });
  if (userInfo.value.verify_identity) {
    var res = await editRealname(data);
  } else {
    var res = await putRealname(id.value, data);
  }
  if (res.code == 200) {
    tradeLoading.value = false;
    ElMessage.success({
      message: res.message,
      type: "success",
      plain: true,
    });
  } else {
    tradeLoading.value = false;
  }
};
const getUsbAddress = async () => {
  loadingType.value = "loading";
  const res = await getUshieldAddress(page.value);
  if (res.code == 200) {
    console.log("数组长度----", res.data.data.length);
    listLength.value = res.data.data.length ? res.data.data.length : [];
    loadingType.value = "noData";
    if (page.value == 1) {
      addressList.value = res.data.data;
    } else {
      addressList.value = addressList.value.concat(res.data.data);
    }

    // console.log("获取的u盾地址----", addressList.value, editList.value);
  }
};
const handleUsd = async () => {
  var data = {
    address: usbInfo.value.address,
    type: usbInfo.value.type,
  };
  if (subType.value == "add") {
    const res = await addUshieldAddress(data);
    if (res.code == 200) {
      editList.value = false;
      usbSecondPage.value = "one";
      ElMessage.success({
        message: res.message,
        type: "success",
        plain: true,
      });
      getUsbAddress();
    }
  } else if (subType.value == "edit") {
    const res = await editUshield(usbInfo.value.id, data);
    if (res.code == 200) {
      editList.value = false;
      usbSecondPage.value = "one";
      ElMessage.success({
        message: res.message,
        type: "success",
        plain: true,
      });
      getUsbAddress();
    }
  }
  subType.value = "add";
  console.log("subType类型=====", subType.value);
};
const handleSelectType = (e, item) => {
  subType.value = e;
  usbInfo.value = item;
  editList.value = true;
  usbSecondPage.value = "two";
};
const handleChangeType = () => {
  usbSecondPage.value = "one";
  editList.value = false;
  console.log("点击了-----", usbSecondPage.value);
};
// 处理滚动事件
const handleScroll = throttle((type) => {
  // 
  if (type == "usb") {
    if (listLength.value == 10) {
      const container = containerRef.value;
      if (
        container.scrollTop + container.clientHeight >=
        container.scrollHeight - 50
      ) {
        if (!isScrolling.value) {
          isScrolling.value = true;
          // 使用 requestAnimationFrame 优化性能
          requestAnimationFrame(() => {
            page.value++;
            getUsbAddress();
            isScrolling.value = false;
          });
        }
      }
    }
  } else if (type == "top_up") {
    if (listLength.value == 10) {
      const container = listContent.value;
      if (
        container.scrollTop + container.clientHeight >=
        container.scrollHeight - 50
      ) {
        if (!isScrolling.value) {
          isScrolling.value = true;
          // 使用 requestAnimationFrame 优化性能
          requestAnimationFrame(() => {
            page.value++;
            getOrderList();
            isScrolling.value = false;
          });
        }
      }
    }
  } else if (type == "mall") {
    if (listLength.value == 10) {
      const container = mallContent.value;
      if (
        container.scrollTop + container.clientHeight >=
        container.scrollHeight - 50
      ) {
        if (!isScrolling.value) {
          isScrolling.value = true;
          // 使用 requestAnimationFrame 优化性能
          requestAnimationFrame(() => {
            page.value++;
            if (poinsIndex.value == 0) {
              getPoints();
            } else if (poinsIndex.value == 1) {
              getChangePoints();
            }
            isScrolling.value = false;
          });
        }
      }
    }
  }
}, 500);
const delUsbItem = async () => {
  console.log("删除确定----", usbInfo.value);
  const res = await delectUshield(usbInfo.value.id);
  if (res.code == 200) {
    editList.value = false;
    getUsbAddress();
    //  showPopup1027.value= false
  }
};
const handleDelUsb = (item) => {
  // showPopup1027.value =true
  handleShow1027("del");
  usbInfo.value = item;
};
const handleShow1027 = (type) => {
  showPopup1026.value = false;
  clickType.value = type;

  console.log("退出登入------");
  refCustomer.value.openShow();
};
const handleEye = (type) => {
  if (type == "pasd") {
    pasdShow.value = !pasdShow.value;
  } else if (type == "newPasd") {
    newShow.value = !newShow.value;
  } else if (type == "repNewPasd") {
    repnewShow.value = !repnewShow.value;
  } else if (type == "logPasd") {
    logPasd.value = !logPasd.value;
  } else if (type == "logNewPasd") {
    logNewPasd.value = !logNewPasd.value;
  } else if (type == "logRepNewPasd") {
    logRepNewPasd.value = !logRepNewPasd.value;
  }
};
// 确认按钮
const outLogin = () => {
  if (clickType.value == "out") {
    // 调用退出功能
    handleOutLogin();
  } else if (clickType.value == "del") {
    // 调用删除功能
    delUsbItem();
  }
};
const handleOutLogin = async () => {
  try {
    const res = await logout();
    if (res.code == 200) {
      ElMessage.success({
        message: res.message,
        type: "success",
        plain: true,
      });
    } else {
      ElMessage.warning({
        message: res.message || "登出失败，已强制退出",
        type: "warning",
        plain: true,
      });
    }
  } catch (error) {
    ElMessage.error({
      message: "登出接口异常，已强制退出",
      type: "error",
      plain: true,
    });
  } finally {
    localStorage.removeItem("token");
    localStorage.removeItem("userInfo");
    router.replace("/login");
  }
};
</script>

<style scoped lang="less">
.btnboxs {
  width: 300px;
  display: flex;
  justify-content: end;
  align-items: center;
}

.imglang {
  width: 100%;
  height: 100%;
}

.nzsdnwa2 {
  width: 80px;
  //   min-width: 40px;
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  cursor: pointer;
}

.njhfuew23efrwe {
  padding: 5px 15px;
  box-sizing: border-box;
  background-color: #2b3949;
  color: #fff;
  border-radius: 5px;
}

.svgjpiowe234jm {
  width: 22;
  height: 22px;
  display: flex;
  justify-content: end;
  align-items: center;
}

/* 容器 hover 时显示 */
.nzsdnwa2:hover .language-selector {
  opacity: 1;
  pointer-events: auto;
  transition-delay: 0s;
  /* 移入时立即显示 */
}

/* 默认隐藏，带过渡 */
.language-selector {
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: auto;
  position: absolute;
  top: 50px;
  right: -22px;
  background-color: #18191e;
  padding: 10px;
  box-sizing: border-box;
  z-index: 99999;

  opacity: 0;
  /* 不用 display: none; */
  pointer-events: none;
  /* 不可点击 */
  transition: opacity 0.3s ease;
  /* 淡入淡出 */
  transition-delay: 0.3s;
  /* 移出时延时 0.3s 后关闭 */
}

.wwtw {
  width: 20px;
  height: 20px;
  font-weight: 700;
  margin-right: 8px;
  color: #fff;
}

.wwtq {
  width: 18px;
  height: 18px;
  font-weight: 700;
  margin-right: 5px;
  color: #fff;
}

.language-option {
  cursor: pointer;
  color: #fbfbfb;
  justify-content: space-between;
  width: 150px;
  padding: 10px;
  font-size: 13px;
  text-align: center;
  box-sizing: border-box;
}

.language-option:hover {
  background-color: #202b2c;
}

.linehead {
  width: 1px;
  height: 20px;
  background-color: #5e5e62;
  margin: 0 25px;
}

.download_content {
  margin-right: 5px;
  cursor: pointer;
  position: relative;

  .iconfont {
    font-size: 22px;
    color: #fff;
  }

  .download_list {
    position: absolute;
    left: -148px;
    top: 30px;
    display: flex;
    align-items: center;
    color: #fff;
    padding: 15px;
    background: rgb(24, 25, 30);
    display: none;

    .list_item {
      display: flex;
      flex-direction: column;
      align-items: center;

      img {
        width: 110px;
        height: 110px;
        border-radius: 5px;
      }

      .download_text {
        font-size: 14px;
        font-weight: 700;
      }
    }

    .list_item:first-child {
      margin-right: 10px;
    }
  }
}

.download_content:hover {
  .download_list {
    display: flex;
  }
}

.logoIcon {
  display: flex;
  align-items: center;
  color: #fff;
  cursor: pointer;

  .icon-wode {
    font-size: 18px;
    margin-right: 5px;
  }

  .login_text {
    font-size: 14px;
  }
}

.txhead {
  display: flex;
  position: relative;
  justify-content: end;
  align-items: center;
  height: 60px;
  width: 30px;
  cursor: pointer;

  .txheadimg {
    width: 24px;
    height: 24px;
    cursor: pointer;
  }
}

.tter {
  display: flex;
  justify-content: space-between;
  margin-top: 15px;
}

.userimgbox {
  position: absolute;
  top: 60px;
  right: -82px;
  width: 327px;
  height: 333px;
  display: flex;
  opacity: 0;
  /* 透明隐藏 */
  pointer-events: none;
  /* 不可点击 */
  transition: opacity 0.3s ease;
  /* 淡入淡出 */
  transition-delay: 0.3s;
  /* 移出时延时关闭 */

  .userl {
    width: 50px;
    height: 100%;
    background-color: #f7d04c;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 5px 0 0 5px;

    .userlimg {
      width: 109px;
      height: 30px;
      transform: rotate(270deg);
      /* 顺时针旋转90度 */
      transform-origin: center;
      /* 旋转中心点 */
      margin-top: 150px;
    }
  }

  .userr {
    flex-grow: 1;
    background-color: #18191e;
    color: #fff;
    border-radius: 0 5px 5px 0;
    padding-left: 20px;
    padding-right: 10px;
    box-sizing: border-box;

    .userinfo {
      display: flex;
      padding: 8px;
      box-sizing: border-box;

      img {
        width: 40px;
        height: 40px;
      }

      .infoid {
        padding-left: 12px;
        box-sizing: border-box;

        .username {
          font-size: 14px;
          font-weight: 500;
          color: #fafafb;
        }

        .uidbox {
          display: flex;
          font-size: 12px;
          color: #a3a3a5;
          font-weight: 500;
        }

        .uidbtn {
          margin-left: 5px;
          display: flex;
          align-items: center;

          .iconfont {
            color: #f7d04c;
          }

          .icon-caidan-anquan1x {
            color: #00c541;
          }

          .toAuth {
            font-size: 12px;
            color: #f7d04c;
          }
        }
      }
    }

    .user-item {
      display: flex;
      align-items: center;
      padding: 8px;

      .usertxt {
        color: #cdcdd1;
        font-size: 14px;
        font-weight: 500;
        margin-left: 5px;
      }
    }

    .user-item:hover {
      background-color: #202b2c;
      border-radius: 5px;
    }

    .ggbox {
      display: flex;
      border: 1px #383942 solid;
      border-radius: 5px;
      padding: 10px;
      margin: 8px 0;

      .ggimg {
        width: 79px;

        img {
          width: 100%;
          height: 69px;
        }
      }

      .ggtxt {
        flex-grow: 1;
        display: flex;
        flex-direction: column;
        font-size: 14px;
        color: #e6e6e6;
        width: 100%;

        .ggh {
          color: #f7d04c;
          margin-top: 10px;
          font-size: 16px;
          font-weight: 700;
          font-family: math;
        }
      }
    }
  }
}

.zichan {
  width: auto;
  background-color: #589cf8;
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 25px;
  border-radius: 5px;
  margin-right: 20px;
  cursor: pointer;
  padding: 0 10px;
  min-width: 96px;
}

.txhead:hover .userimgbox {

  opacity: 1;
  pointer-events: auto;
  transition-delay: 0s;
  /* 进入时立刻显示 */
}

/* 遮罩层 */
.mask1025 {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(13, 17, 18, 0.6);
  backdrop-filter: blur(8px);
  /* 关键属性 - 模糊程度 */
  z-index: 1000;

  /* 弹窗主体 */
  .popup-container1025 {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 800px;
    height: 643px;
    background: #21232a;
    border-radius: 8px;
    color: #ffffff;

    /* 头部样式 */
    .popup-header1025 {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 16px 24px;
      border-bottom: 1px solid #3c3e47;

      .title1025 {
        margin: 0;
        font-size: 16px;
      }

      .close-icon1025 {
        width: 22px;
        height: 22px;
        padding: 3px;
        color: #fff;
        background-color: #f7d04c;
        cursor: pointer;
        font-size: 16px;
        border-radius: 50%;
        color: rgba(0, 0, 0, 0.45);
      }
    }

    /* 主体布局 */
    .popup-body1025 {
      display: flex;
      height: calc(100% - 57px);

      .flex_column {
        flex-direction: column;
        display: flex;
        justify-content: space-between;
      }

      /* 左侧 tabs */
      .tabs-container1025 {
        width: 277px;
        border-right: 1px solid #3c3e47;
        padding: 16px 10px;

        .tab-item1025 {
          padding: 15px;
          cursor: pointer;
          transition: background 0.3s;
          border-radius: 8px;
          border: 1px #42423f solid;
          margin-bottom: 12px;
          font-size: 14px;
          display: flex;
          align-items: center;

          .iuyhdw7913u314f {
            margin-left: 10px;
          }

          &.active1025 {
            background: #f7d04c;
            // border-right: 3px solid #1890ff;
          }
        }
      }

      .submit {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        margin-top: 20px;

        .submit_pay {
          width: 40%;
          background-color: #589cf8;
          color: #fff;
          border-radius: 5px;
          font-size: 16px;
          padding: 2px 0;
          border: none;
          line-height: 45px;
          cursor: pointer;
        }
      }

      /* 右侧内容 */
      .input_list {
        width: 100%;

        .input_item {
          width: 100%;

          .id_card {
            padding: 0;
            width: 100%;
            height: 200px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 10px;
            background-color: #202b2c;
            margin-top: 10px;

            .avatar {
              width: 100%;
              height: 100%;
              border-radius: 10px;
              object-fit: cover;
            }

            .text_area {
              width: 100%;
              height: 100%;
              background-color: #202b2c;
              border-radius: 10px;
              font-size: 16px;
              color: #fff;
              font-weight: 700;
              padding: 5px;
            }
          }

          .key {
            margin-top: 15px;
            color: #fff;
            font-size: 14px;
          }

          .input_text {
            width: 100%;
            padding: 0 15px;
            border-radius: 6px;
            height: 44px;
            // line-height: 44px;
            font-size: 16px;
            background-color: #202b2c;
            margin-top: 10px;
            color: #fff;
          }

          .usd_price {
            display: flex;
            align-items: center;
            padding: 0 15px;
            border-radius: 6px;
            height: 44px;

            font-size: 16px;
            margin-top: 10px;
            background-color: #202b2c;

            input {
              height: 100%;
              line-height: 44px;
              flex: 1;
              color: #fff;
            }

            .all {
              font-size: 14px;
              color: #fff;
              background-color: #589cf8;
              border-radius: 3px;
              padding: 2px 5px;
              font-size: 14px;
              cursor: pointer;
            }
          }
        }
      }

      .content-container1025 {
        flex: 1;
        // padding: 24px;
        margin: 20px 0;
        padding: 0 20px;
        overflow: auto;

        .cz1413 {
          .integral_content {
            width: 100%;
            height: 100%;

            .order_list {
              width: 50%;
              box-sizing: border-box;
              border-radius: 10px;
              padding: 12px;
              margin-bottom: 15px;
              background: url('@/assets/order-bg.png') 50% no-repeat;

              .order_top {
                font-weight: 700;
                color: #fff;
                opacity: 0.7;
                font-size: 14px;
                line-height: 20px;
              }

              .order_amount {
                display: flex;
                align-items: center;
                margin: 5px 0;

                text {
                  font-weight: 700;
                  font-size: 25px;
                  color: #fff;
                }

                image {
                  width: 20px;
                  height: 20px;
                  margin-left: 10px;
                }
              }

              .order_bottom {
                padding-top: 5px;
                display: flex;
                align-items: center;

                .order_item {
                  flex: 1;
                  display: flex;
                  flex-direction: column;

                  .item_title {
                    color: hsla(0, 0%, 100%, 0.7);
                    font-size: 14px;
                  }

                  .item_amount {
                    color: #fff;
                    font-weight: 700;
                    font-size: 14px;
                  }
                }
              }
            }

            .list_content {
              width: 100%;
              height: (100% - 50px);
              overflow: hidden;
              overflow-y: auto;

              .title_list {
                width: 100%;
                display: flex;
                align-items: center;
                height: 45px;

                .list_item {
                  height: 35px;
                  line-height: 35px;
                  position: relative;
                  margin-right: 15px;
                  cursor: pointer;

                  .name {
                    color: #fff;
                    font-size: 14px;
                  }

                  .underline {
                    position: absolute;
                    bottom: 0;
                    left: 50%;
                    width: 20px;
                    height: 3px;
                    background-color: transparent;
                    transition: background-color 0.3s;
                    transform: translateX(-50%);
                    border-radius: 8px;
                  }

                  .active {
                    background-color: #f5bd08;
                    /* 选中时下划线颜色 */
                    border-radius: 8px;
                  }
                }
              }

              .ffdg {
                position: sticky;
                top: 0px;
                z-index: 999;
                background-color: #21232a;
              }

              .heightAuto {
                height: 330px;
                flex: 1;
                overflow: hidden;
                overflow-y: auto;
              }

              .integral_list {
                width: 100%;
                height: 100%;
                margin-top: 15px;

                .list_item {
                  width: 100%;
                  border-radius: 5px;
                  border-bottom: 0.5px solid #222a2c;
                  padding: 15px;
                  box-sizing: border-box;
                  background-color: #222a2c;
                  margin-bottom: 10px;

                  .header_top {
                    width: 100%;
                    display: flex;
                    align-items: center;

                    .id {
                      color: #999;
                      font-size: 14px;
                    }

                    img {
                      width: 14px;
                      height: 14px;
                      margin-left: 5px;
                    }
                  }

                  .list {
                    width: 100%;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    flex-wrap: wrap;

                    .item {
                      width: 33%;
                      display: flex;
                      flex-direction: column;
                      // margin-top: 10px;

                      .key {
                        color: #fff;
                        opacity: 0.5;
                        font-size: 12px;
                      }

                      .value {
                        // height:40px;
                        font-size: 14px;
                        margin-top: 5px;
                        color: #fff;
                      }

                      .add_color1 {
                        color: #27c77e;
                      }

                      .add_color2 {
                        color: #f90;
                      }

                      .add_color3 {
                        color: #f56c6c;
                      }
                    }

                    .add_marigin {
                      margin-top: 10px;
                    }

                    .text_center {
                      text-align: center;
                    }

                    .text_right {
                      text-align: right;
                    }
                  }

                  .illustrate {
                    width: 100%;
                    display: flex;
                    // align-items: center;
                    justify-content: space-between;
                    margin-top: 15px;

                    .illustrate_text {
                      color: #fff;
                      opacity: 0.5;
                      font-size: 12px;
                    }

                    .illustrate_info {
                      flex: 1;
                      color: #fff;
                      font-size: 14px;
                    }
                  }
                }
              }

              .mall_list {
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: space-between;
                flex-wrap: wrap;
                margin-top: 15px;

                .mall_item {
                  width: 100%;
                  border-radius: 5px;
                  border-bottom: 0.5px solid #222a2c;
                  padding: 10px;
                  box-sizing: border-box;
                  background-color: #222a2c;
                  margin-bottom: 10px;

                  .img_top {
                    width: 100%;
                    height: 140px;
                    border-radius: 5px;

                    img {
                      width: 100%;
                      height: 100%;
                      border-radius: 5px;
                    }
                  }

                  .item_bottom {
                    width: 100%;
                    margin-top: 5px;

                    .item_title {
                      height: 42px;
                      font-size: 14px;
                      color: #fff;
                      // opacity: .5;
                      overflow: hidden;
                      text-overflow: ellipsis;
                      display: -webkit-box;
                      -webkit-box-orient: vertical;
                      -webkit-line-clamp: 2;
                    }

                    .text_bottom {
                      width: 100%;
                      display: flex;
                      align-items: center;
                      justify-content: space-between;
                      margin-top: 5px;

                      .price {
                        font-size: 12px;
                        color: #f56c6c;
                      }

                      .price_right {
                        display: flex;
                        align-items: center;

                        .img_integral {
                          width: 16px;
                          height: 16px;
                        }

                        .integral_text {
                          color: #f7d04c;
                          font-size: 13px;
                          margin-left: 5px;
                        }
                      }

                      .exchange {
                        padding: 8px 40px;
                        font-size: 13px;
                        color: #fff;
                        margin: 0;
                        background-color: #f7d04c;
                        line-height: normal;
                        border: none;
                        border-radius: 4px;
                        cursor: pointer;
                      }
                    }
                  }
                }
              }
            }
          }

          .title_text {
            font-weight: 700;
            font-size: 18px;
            margin-bottom: 15px;
            color: #fff;
          }

          .set_password,
          .set_logo_pasd {
            width: 100%;

            .title_content {
              width: 100%;
              display: flex;
              align-items: center;

              .iconfont {
                font-size: 24px;
                cursor: pointer;
              }

              .title {
                margin-bottom: 0;
                color: #fff;
                font-size: 24px;
                font-weight: normal;
                padding-left: 7px;
              }
            }

            .list_item {
              width: 100%;

              .item {
                width: 100%;
                margin-top: 15px;

                .key {
                  font-size: 14px;
                  color: #fff;
                  opacity: 0.7;
                }

                .key_tip {
                  margin-top: 5px;
                  color: #f35956;
                  font-size: 14px;
                }

                .value {
                  padding: 0 15px;
                  width: 100%;
                  display: flex;
                  align-items: center;
                  justify-content: space-between;
                  background-color: #202b2c;
                  margin-top: 10px;
                  height: 44px;
                  line-height: 44px;

                  input {
                    width: 100%;
                    border-radius: 6px;
                    font-size: 16px;
                    color: #fff;
                  }
                }

                .id_card {
                  padding: 0;
                  height: 200px;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  border-radius: 10px;
                  position: relative;

                  .avatar {
                    width: 100%;
                    height: 100%;
                    border-radius: 10px;
                    object-fit: cover;
                  }

                  .iconfont {
                    font-size: 26px;
                  }

                  .file_text {
                    position: absolute;
                    width: 100%;
                    height: 100%;
                  }

                  .file_text::-webkit-file-upload-button {
                    visibility: hidden;
                  }

                  .file_text::before {
                    // content: '选择文件';
                    display: inline-block;
                    background: linear-gradient(top, #f9f9f9, #e3e3e3);
                    border: 1px solid #999;
                    border-radius: 3px;
                    padding: 5px 8px;
                    outline: none;
                    white-space: nowrap;
                    -webkit-user-select: none;
                    cursor: pointer;
                    text-shadow: 1px 1px #fff;
                    font-weight: 700;
                    font-size: 10pt;
                  }

                  .file-label::after {
                    content: "点击上传文件";
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                    color: white;
                  }
                }
              }
            }

            .addbtn {
              width: 100%;
              margin-top: 20px;
              background-color: #589cf8;
              color: #fff;
              border-radius: 5px;
              font-size: 16px;
              border: none;
              height: 45px;
              line-height: 45px;
              position: static;
              top: 0%;
              left: 0%;
              transform: translate(-0%, -0%);
            }

            .add_margin {
              margin-bottom: 30px;
            }
          }

          .addbtn {
            width: 100%;
            margin-top: 10px;
            background-color: #589cf8;
            color: #fff;
            border-radius: 5px;
            font-size: 16px;
            border: none;
            height: 45px;
            line-height: 45px;
            position: static;
            top: 0%;
            left: 0%;
            transform: translate(-0%, -0%);
          }

          .address_content {
            .usb_address {
              width: 100%;
              margin-top: 20px;

              .list_item {
                padding: 15px;
                background-color: #202b2c;
                border-radius: 10px;
                margin-bottom: 10px;

                .item_top {
                  width: 100%;

                  .item {
                    width: 100%;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    padding: 5px 0;
                    margin-top: 0px;

                    .key {
                      color: #fff;
                      opacity: 0.7;
                      font-size: 14px;
                    }

                    .value {
                      width: auto;
                      font-weight: 500;
                      color: #fff;
                      font-size: 14px;
                      height: auto;
                      line-height: 20px;
                    }
                  }
                }

                .list_bottom {
                  width: 100%;
                  display: flex;
                  align-items: center;
                  justify-content: flex-end;

                  .item {
                    width: auto;
                    display: flex;
                    align-items: center;
                    margin-left: 10px;
                    padding-top: 0px;
                    cursor: pointer;

                    img {
                      width: 15px;
                      height: 15px;
                    }

                    .iconfont {
                      font-size: 16px;
                      color: #f7d04c;
                      margin-left: 5px;
                    }

                    .edit {
                      font-size: 14px;
                      color: #f7d04c;
                      margin-left: 5px;
                    }
                  }
                }
              }
            }
          }

          .setup_list {
            width: 100%;

            .title {
              font-weight: 700;
              font-size: 18px;
              margin-bottom: 15px;
              color: #fff;
            }

            .list_item {
              width: 100%;
              display: flex;
              align-items: center;
              justify-content: space-between;
              cursor: pointer;
              border-radius: 10px;
              padding: 15px;
              margin-bottom: 15px;
              background-color: #202b2c;

              .key {
                font-size: 14px;
                color: #fff;
              }

              .iconfont {
                font-size: 12px;
                color: #fff;
              }
            }
          }

          .list_content {
            width: 100%;

            .item_list {
              width: 100%;
              display: flex;
              align-items: center;
              justify-content: space-between;
              cursor: pointer;
              border-radius: 10px;
              padding: 15px;
              margin-bottom: 15px;
              background-color: #202b2c;

              .key {
                color: #fff;
                font-size: 14px;
              }

              .value {
                display: flex;
                align-items: center;
                justify-content: flex-end;

                p {
                  color: #fff;
                  font-size: 14px;
                }

                .verify {
                  color: #f7d04c;
                }

                .icon-fuzhi {
                  font-size: 16px;
                  color: #f7d04c;
                  margin-left: 5px;
                }
              }
            }
          }

          .title {
            margin-bottom: 10px;
            font-size: 18px;
            color: #fff;
          }

          .topupMethod {
            width: 60%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding-bottom: 15px;

            .text_btn {
              width: 48%;
              height: 40px;
              text-align: center;
              border: 1px solid #3c3e47;
              color: hsla(0, 0%, 100%, 0.7);
              color: #fff;
              border-radius: 5px;
              font-size: 16px;
              line-height: 35px;
              cursor: pointer;
            }

            .active_text_btn {
              background-color: #589cf8;
              color: #fff;
            }
          }

          .select_info {
            width: 100%;

            .select_content {
              width: 100%;
              position: relative;

              .num_list {
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: space-between;
                border-radius: 10px;
                padding: 15px;
                background-color: #202b2c;

                .list_left {
                  display: flex;
                  align-items: center;

                  .Gold_coin_type {
                    width: 25px;
                    height: 25px;
                    background-color: #687ee3;
                    border-radius: 50%;
                    display: flex;
                    align-items: center;
                    justify-content: center;

                    img {
                      width: 100%;
                      height: 100%;
                      border-radius: 50%;
                    }
                  }

                  .coin_type_text {
                    font-size: 16px;
                    margin-left: 10px;
                    cursor: pointer;
                  }
                }

                .icon-youjiantou {
                  font-size: 14px;
                  transform: rotate(90deg);
                }
              }

              .select_list {
                position: absolute;
                top: 60px;
                width: 100%;
                padding: 0 15px;
                background-color: #555;
                border-radius: 10px;
                z-index: 2;

                li {
                  border-bottom: 1px solid #3c3e47;
                  cursor: pointer;
                  display: flex;
                  align-items: center;
                  padding: 15px 0;
                  z-index: 2;

                  .left_icon {
                    width: 25px;
                    height: 25px;
                    border-radius: 50%;
                    display: flex;
                    align-items: center;
                    justify-content: center;

                    img {
                      width: 100%;
                      height: 100%;
                      border-radius: 50%;
                    }
                  }

                  // .color1 {
                  //   background-color: #009393;
                  // }
                  // .color2 {
                  //   background-color: #2775ca;
                  // }
                  // .color3 {
                  //   background-color: #687ee3;
                  // }
                  // .color4 {
                  //   background-color: #f7931a;
                  // }
                  .icon_text {
                    font-size: 16px;
                    margin-left: 10px;
                    color: #fff;
                  }

                  //   .icon_text:hover{

                  //   }
                }

                li:hover {
                  .icon_text {
                    color: #f7d04c;
                  }
                }
              }
            }

            .text_list {
              width: 100%;

              .text_item {
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: space-between;
                margin-top: 10px;

                .key {
                  font-size: 14px;
                  color: #fff;
                  opacity: 0.6;
                }

                .value {
                  font-size: 14px;
                  color: #fff;
                  opacity: 0.5;
                }
              }

              .add_color {
                .key {
                  font-size: 16px;
                  opacity: 1;
                }

                .value {
                  font-size: 16px;
                  opacity: 1;
                }
              }
            }

            .to_url {
              width: 100%;
              display: flex;
              align-items: center;
              padding-top: 15px;

              .left_icon {
                width: 60px;
                height: 60px;
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
                background-color: #687ee3;
                margin-right: 15px;

                img {
                  width: 100%;
                  height: 100%;
                }

                .icon-ethereum {
                  font-size: 30px;
                }
              }

              .right_icon {
                flex: 1;

                .title_text {
                  color: #fff;
                  font-size: 14px;
                }

                .url_bottom {
                  display: flex;
                  align-items: center;
                  justify-content: space-between;
                  border-radius: 10px;
                  font-weight: 700;
                  padding: 15px;
                  margin-top: 10px;
                  background-color: #202b2c;

                  .url_text {
                    font-size: 11px;
                    color: #589cf8;
                  }

                  .icon-fuzhi {
                    color: #589cf8;
                    cursor: pointer;
                  }
                }
              }
            }

            .exchange_rate {
              width: 100%;
              display: flex;
              align-items: center;
              justify-content: center;
              padding-top: 15px;

              .exchange_rate_text {
                width: 100%;
                border-radius: 10px;
                border: 1px solid #666;
                text-align: center;
                font-size: 16px;
                padding: 15px;
                color: #fff;
              }
            }
          }

          .select_list {
            width: 100%;

            .pay_type {
              border-radius: 10px;
              padding: 15px;
              background-color: #202b2c;
              display: flex;
              align-items: center;

              img {
                width: 25px;
                height: 25px;
                cursor: pointer;
              }

              .pay_name {
                font-size: 16px;
                margin-left: 10px;
                cursor: pointer;
              }
            }

            .exchange_rate {
              width: 100%;
              display: flex;
              align-items: center;
              justify-content: center;
              padding-top: 15px;

              .exchange_rate_text {
                width: 100%;
                border-radius: 10px;
                border: 1px solid #666;
                text-align: center;
                font-size: 16px;
                padding: 15px;
                color: #fff;
              }
            }

            .pay_text {
              width: 100%;
              display: flex;
              align-items: center;
              justify-content: space-between;
              margin-top: 15px;

              .text_left {
                font-size: 16px;
                color: #fff;
              }

              .text_right {
                font-size: 16px;
                color: #fff;
              }
            }
          }
        }

        .zjjv1413 {
          width: 100%;
          height: 100%;
          position: relative;

          .select_info {
            .editPage {
              display: flex;
              align-items: center;
              padding-bottom: 15px;
              font-size: 18px;

              .iconfont {
                cursor: pointer;
              }

              p {
                margin-left: 5px;
              }
            }

            .select_content {
              .num_list {
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: space-between;
                border-radius: 10px;
                padding: 15px;
                background-color: #202b2c;

                .list_left {
                  display: flex;
                  align-items: center;

                  .Gold_coin_type {
                    width: 25px;
                    height: 25px;
                    background-color: #687ee3;
                    border-radius: 50%;
                    display: flex;
                    align-items: center;
                    justify-content: center;

                    img {
                      width: 100%;
                      height: 100%;
                      border-radius: 50%;
                    }
                  }

                  .coin_type_text {
                    font-size: 16px;
                    margin-left: 10px;
                    cursor: pointer;
                  }
                }

                .icon-youjiantou {
                  font-size: 14px;
                  transform: rotate(90deg);
                }
              }

              .submit {
                .submit_pay {
                  width: 40%;
                  background-color: #589cf8;
                  color: #fff;
                  border-radius: 5px;
                  font-size: 16px;
                  padding: 2px 0;
                  border: none;
                  height: 45px;
                  line-height: 45px;
                  cursor: pointer;
                  margin-bottom: 24px;
                }
              }
            }
          }

          .title_content {
            width: 100%;
            display: flex;
            align-items: center;

            .iconfont {
              font-size: 20px;
              cursor: pointer;
            }

            .title {
              margin-bottom: 0;
              color: #fff;
              font-size: 20px;
              font-weight: normal;
              padding-left: 7px;
            }
          }

          .submit_btn {
            width: 100%;
            margin-top: 20px;
            background-color: #589cf8;
            color: #fff;
            border-radius: 5px;
            font-size: 16px;
            border: none;
            height: 45px;
            line-height: 45px;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
          }

          .invite_title {
            font-weight: 700;
            font-size: 18px;
            margin-bottom: 5px;
            color: #fff;
            cursor: pointer;
          }

          .invite_info {
            font-size: 15px;
            margin-bottom: 10px;
            color: #fff;
            cursor: pointer;
          }

          .invite_desc {
            color: #fff;
            opacity: 0.75;
            font-size: 12px;
            cursor: pointer;
          }

          .img_content {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-around;
            padding-top: 15px;
            padding-bottom: 30px;

            .img_code {
              border: 2px solid #fff;
              border-radius: 10px;
              //   padding: 5px;
              width: 110px;
              height: 110px;
              box-sizing: border-box;
              display: flex;
              flex-direction: column;
              align-items: center;

              img {
                width: 100%;
                height: 100%;
              }
            }

            .img_right {
              width: 200px;
              height: 200px;

              img {
                width: 100%;
                height: 100%;
              }
            }
          }

          .list_content {
            width: 100%;

            .list_item {
              width: 100%;
              border-radius: 10px;
              display: flex;
              align-items: center;
              justify-content: space-between;
              background-color: #202b2c;
              padding: 15px;
              margin-bottom: 10px;
              cursor: pointer;

              .key {
                color: #fff;
                font-size: 12px;
              }

              .item_right {
                display: flex;
                align-items: center;
                justify-content: flex-end;
                color: #589cf8;
                font-weight: 700;

                p {
                  font-size: 10px;
                }

                .icon-fuzhi {
                  font-size: 12px;
                  margin-left: 5px;
                }
              }
            }
          }

          .list_title {
            width: 100%;
            display: flex;
            align-items: center;
            padding-bottom: 10px;

            .title_item {
              height: 43px;
              line-height: 43px;
              position: relative;
              margin-right: 20px;
              cursor: pointer;

              .name {
                color: #fff;
                opacity: 0.6;
                font-size: 14px;
              }

              .underline {
                position: absolute;
                bottom: 0;
                left: 50%;
                width: 20px;
                height: 3px;
                background-color: transparent;
                transition: background-color 0.3s;
                transform: translateX(-50%);
                border-radius: 8px;
              }

              .active {
                background-color: #f5bd08;
                /* 选中时下划线颜色 */
                border-radius: 8px;
              }
            }
          }

          .top_up_list {
            width: 100%;
            height: calc(100% - 80px);
            overflow: hidden;
            overflow-y: auto;

            .list {
              border-radius: 10px;
              border: 1px solid #222a2c;
              padding-bottom: 15px;
              box-sizing: border-box;
              margin-bottom: 15px;
              color: #fff;
              background: none;
              padding: 0;
              padding-bottom: 15px;

              .list_top {
                width: 100%;
                display: flex;
                flex-direction: column;
                // align-items: center;
                justify-content: space-between;
                padding: 15px;
                box-sizing: border-box;
                background-color: #222a2c;
                border-top-left-radius: 10px;
                border-top-right-radius: 10px;

                .name {
                  font-size: 14px;
                }

                .name_right {
                  display: flex;
                  align-items: center;

                  // justify-content: flex-end;
                  // margin-top: 5px;
                  .id_num {
                    color: #999;
                    font-size: 14px;
                  }

                  .iconfont {
                    color: #999;
                    font-size: 16px;
                    margin-left: 5px;
                  }

                  img {
                    width: 15px;
                    height: 15px;
                    margin-left: 5px;
                  }
                }
              }

              .btn_content {
                width: 100%;
                align-items: center;
                justify-content: flex-end;
                display: flex;
                padding: 0 15px;
                box-sizing: border-box;
                margin-top: 10px;

                .btn_item {
                  border-radius: 5px;
                  border: 1px solid #222a2c;
                  padding: 5px 15px;
                  font-size: 12px;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  margin-left: 5px;
                  cursor: pointer;

                  .more_text {
                    font-size: 12px;
                    color: #fff;
                  }

                  .iconfont {
                    margin-left: 5px;
                  }

                  .icon-bianji {
                    font-size: 12px;
                  }

                  .icon-youjiantou {
                    font-size: 10px;
                  }

                  image {
                    width: 12px;
                    height: 12px;
                  }

                  .edit_img {
                    margin-left: 5px;
                  }
                }
              }

              .list_content {
                width: 100%;
                display: flex;
                flex-wrap: wrap;
                justify-content: space-between;
                align-items: center;
                padding: 0 15px;
                margin-top: 10px;
                box-sizing: border-box;

                .add_text_center {
                  text-align: center;
                }

                .item {
                  width: 30%;
                  display: flex;
                  flex-direction: column;
                  font-size: 11px;
                  margin: 4px 0;
                  padding-bottom: 0px;
                  border-bottom: 0px;

                  .key {
                    opacity: 0.5;
                    font-size: 12px;
                  }

                  .value {
                    font-weight: 700;
                    opacity: 0.9 !important;
                    font-size: 13px;
                    margin-top: 4px;
                    color: #fff;
                    //
                  }

                  .add_color1 {
                    color: #27c77e;
                  }

                  .add_color2 {
                    color: #f90;
                  }

                  .add_color3 {
                    color: #f56c6c;
                  }

                  .time_text {
                    line-height: 14px;
                  }
                }

                .add_right {
                  text-align: right;
                }

                // .item:nth-child(3n+1) {
                // 	align-items: start;
                // }

                // .item:nth-child(3n+2) {
                // 	align-items: center;
                // }

                // .item:nth-child(3n) {
                // 	align-items: end;
                // }
              }
            }
          }

          .list_content {
            height: calc(100% - 55px);
            overflow: hidden;
            overflow-y: auto;
            flex: 1;

            .item {
              width: 100%;
              border-bottom: 1px solid #3c3e47;
              padding-bottom: 15px;
              margin-bottom: 15px;

              .item_text {
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding: 5px 0;

                .key {
                  font-size: 14px;
                  opacity: 0.7;
                  color: #fff;
                }

                .value {
                  font-size: 14px;
                  color: #fff;
                  font-weight: 700;
                }

                .add_bold {
                  font-size: 16px;
                }

                .name {
                  font-weight: 700;
                  font-size: 15px;
                }
              }
            }
          }
        }
      }
    }

    .see_more_body {
      width: 100%;

      .popup_content {
        width: 100%;
        height: 100%;
        padding: 0 30px;
        overflow: hidden;
        overflow-y: auto;

        .item {
          width: 100%;
          display: flex;
          // align-items: center;
          justify-content: space-between;
          padding-top: 15px;

          .key {
            font-size: 14px;
            color: #fff;
          }

          .value {
            width: 60%;
            font-size: 14px;
            color: #fff;
            font-weight: 700;
            word-wrap: break-word;
            text-overflow: ellipsis;
            overflow: hidden;
            text-align: right;
          }

          .add_color1 {
            color: #27c77e;
          }

          .add_color2 {
            color: #f90;
          }

          .add_color3 {
            color: #f56c6c;
          }

          .screenshot {
            width: 100%;
            height: 180px;
            border-radius: 10px;
            margin-top: 15px;
            border: 1px solid #222a2c;
            object-fit: cover;
          }
        }

        .add_column {
          width: 100%;
          flex-direction: column;
          align-items: flex-start;

          .add_margin {
            width: 100%;
            text-align: left;
            margin-top: 5px;
          }
        }
      }
    }
  }

  .confirm_box {
    width: 300px;
    height: auto;
    padding: 0;
    border-radius: 3px;

    .title {
      width: 100%;
      text-align: center;
      padding: 15px 10px 5px;
      color: #fff;
      font-size: 18px;
    }

    .content_text {
      width: 100%;
      text-align: center;
      padding: 13px 16px 13px;
      min-height: 40px;
      font-size: 15px;
      line-height: 1.4;
    }
  }
}

.nuh2o31jhp0sc {
  width: 255px;
  margin: 0 auto;
  background: url(../assets/dbg.png);
  background-size: 100%;
  border-radius: 10px;
  padding: 15px;
  margin-bottom: 15px;

  .uyhe217egdwq3414 {
    display: flex;

    span {
      font-weight: 700;
      font-size: 14px;
      margin-left: 5px;
    }
  }

  .kjdhuwqig412 {
    font-size: 20px;
    font-weight: 700;

    .iconfont {
      font-size: 20px;
      margin-left: 5px;
      cursor: pointer;
    }
  }

  .fgewf3242efsz {
    font-size: 14px;
    color: #efd8a7;
    font-weight: 500;

    .price_text {
      margin-left: 5px;
    }
  }
}
</style>
